Text layout can be wider than node's width

[chrissantamaria]

Bug report

Description / Observed Behavior

In certain contexts, a text node's layout is calculated using a larger width than the node itself, resulting in text overflowing outside its intended container.

Expected Behavior

Layout for text content should be restricted to the node's space within the parent flex container, rather than visually overflowing (in this case, extending beyond the red border).

Reproduction

<div style={{ display: 'flex', padding: 120, background: 'white', justifyContent: 'center' }} >
  <div style={{ display: 'flex', flexDirection: 'row' }}>
    <div style={{ width: 48, height: 48, background: 'black' }} />
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
  </div>
</div>

Create a shareable reproduction link for the issue using https://og-playground.vercel.app.

This example shows a flex row containing a fixed width child (in this case, a black div) followed by another div containing text content wrapped across several lines. The text content appears to be laid out assuming it has the entire width of the flex row to work with rather than accounting for the width of the first child.

Additional Context

I actually encountered this issue originally in diegomura/react-pdf#2182 which also uses Yoga. I did a bit more investigation in that issue thread with unfortunately no luck pinpointing an exact issue. setMeasureFunc seemed to be at least somewhat problematic (providing a larger width for the text node than it should), though I haven't debugged in satori to see if that's the case here as well.

Not entirely sure what satori version the playground site is using - perhaps the latest main (cce9ee0)?

[jeetiss]

A managed to reproduce this error with yoga nodes only, so looks like this is miss use of the measure function

https://codesandbox.io/s/yoga-setmeasurefunc-misuse-v168ep

Oops this is not a react-pdf repository 🙃