diegomura / diegomura/react-pdf
Nested <Text> causes punctuation to be separated from the preceding word
- Dominant language
- TypeScript
- Stars
- 16.8k
- Forks
- 1.3k
- Avg merge
- 5h 6m
- Merged PRs (30d)
- 52
Description
### Description
When using nested `` components for inline bold formatting, `@react-pdf/renderer` may incorrectly break a line around the nested component boundary.
The issue can be reproduced in the React-PDF REPL:
**Reproduction:** [[REPL]](https://react-pdf.org/repl?code=1887b07602e07404e0a6073025819c271802409e0070059c60086112e00c2c4036d4046c40c6035801403b883002600100bc00f97806d4e3c02e804a00dc00a0e6370697ba001e1006f00061402b8c627490403bd73c327a02daaa4611926e7b22f00546fa933d283c01a5e303d5a625e044300372750ae47773762223862307f40b8465e14f4285e00493040a43a7c78eb620354348b107b5e14132ceb384d0f2f461f34a60eeb1414d52e082e2cba7888906a3d085c520f5c80554d08e0dc29d2385e22245b0f06882ee6cd256b6b106e1040e0af78803326246a542439de00392be25b08b87c240eeba42e0503678b10ba300eaf03a30604a1785108225e24a30020f470178001460b542a3ce8180b9041cc8e51c0008e7a599b802f6740f04111620c0903e7aa343c9f169a5ca10321c396d455a23d09b3036de24110963f0c4141c1686cc41c0d072d502b26708f0c0a63aeb1a5d08ab86e03544740a1291b381e9e264071385cfb372e5de24d5b50a224183d588b824111e2dc9a6f11e68eb87dac4a1809bbde56a0aaa9dc508786af61780145e3cd48082fac83e6a1e12624478830178c5d9c85a9bc5b8484f9cdb40a144a8e8136e26348f4c2bf178007a5600074dcc39120e50838032848dc007e61f0ea47d843c8e43717230c8e05e00165b000153806958006f286fda8dc7818002503bcd481bc002f9497827b92f1789603215581fcfef0000f21e1a1be779400f8a04fa08ff8016fa301795e44140282e08f040ac1b697a767c8606014850394b82b0ac0cc30040b4980dc11eaf9086fac170542ca268a800042ed96864740aab9128000ea263e0ac000e41e309af8006412798ccb4044370fc60922589b20288c401df8c0851b11c6cebc1feea5c1c051e9a33070360fc09ef63516a13ef5040d83c6965a08e4aa50161dc3410c6196f9712863c8c1c0ac0004c01000b4c15484fb798c6017d881100c13e6be00173e9315c15c465bc2a9ea4bed1519f1499494e5f2345cdb31bc0008a7a1206a080a2af6ac2d1c20194040022200f4668959fa019d8201b0b94e49ec35b96db70d8179ea6017b825f66b9ce439f18a0503a81034127bad4f9c5737150c5c5035c0255c59d775900c1aa6289558d70af693b2d7024e840b450230f03aca7bfe13760697be99710dc1d6a8bee202e069400ac00031f80c4cc40fd8083b17c880d61a5001b043b0c0308ea298170480005ee0222d406358ffe4fb63ea8687f4313709393913701a500230001cd4d53df7b674dc10ce407c5c048020f804069400ec50cc394dc82faae0012b249ba62ed700b03c9182b0804d5754351b1f6822a9400)
Hyphenation is explicitly disabled:
```ts
Font.registerHyphenationCallback(word => [word]);
```
The problem disappears when the inline bold formatting is removed.
### Expected behavior
Punctuation should remain attached to the preceding word. For example, the following text:
```text
... lacus**, accum...
```
should render visually as:
```text
... lacus,
accum...
```
If the line does not have enough space, the complete word and punctuation should move to the next line.
### Actual behavior
With nested `` used for bold formatting, the renderer inserts a hyphen-like character at the end of the bold word and moves the comma to the beginning of the next line:
```text
... lacus-
, accum...
```
The same behavior occurs with other words, for example:
```text
... consequat-
, interdum...
```
The attached screenshot shows the issue in the React-PDF REPL using Lorem Ipsum text.
### Minimal reproduction
The linked REPL contains a minimal reproduction using:
- a parent `` component,
- plain string children,
- nested `` components for bold fragments,
- `Font.registerHyphenationCallback(word => [word])`.
### Environment
- `@react-pdf/renderer`: `4.4.0` in the React-PDF REPL (it has `4.4.0` locked and does not allow selecting a newer version; I also reproduced the issue locally with the latest version, `@react-pdf/renderer@4.5.1`)
- Hyphenation: disabled with `Font.registerHyphenationCallback(word => [word])`
- Output: generated PDF
### Additional information
The issue appears to be triggered by mixing plain string children with nested `` components inside a parent ``. It does not occur when the nested bold `` components are replaced with plain text.
Contributor guide
Research direction
Start with the linked React-PDF REPL and its minimal reproduction, keeping Font.registerHyphenationCallback(word => [word]) enabled while isolating the nested boundary. Done means the generated PDF keeps punctuation with the preceding word and moves the whole word-plus-punctuation to the next line when needed, without the hyphen-like artifact.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100