Long strings wrap outside of parent component

A simple example:

<Box flexDirection="row">
  <Box flexDirection="column" padding={1}>
    Some text goes here.
  </Box>
  <Box flexDirection="column" flexGrow={1}>
    <Box flexGrow={1} padding={1}>
      {ipsum}
    </Box>
    <Box padding={1}>
      $ An input box goes here.
    </Box>
  </Box>
</Box>

…where ipsum is a text string with several paragraphs worth of text.

The result has each of the paragraphs from ipsum rendered as starting on the same column, but wrapping at the end of the terminal to the start of the next line, where they should be getting hard-wrapped instead to fit the Box’s layout.

[vadimdemedes]

Rewrote text wrapping to accommodate more use cases and pushed to master. Here’s the docs for a new textWrap property - https://github.com/vadimdemedes/ink#wrapping. Note that it’s disabled by default, so theoretically it shouldn’t impact any of existing Ink apps.

@zkat @SimenB @maticzav @icopp I would really appreciate it if you could quickly try master branch (npm install vadimdemedes/ink) in your Ink apps. I pushed some important changes, which I don’t expect to break anything, but better safe than sorry! Thank you ❤️

[vadimdemedes]

Implemented <Box textWrap="wrap"> in master branch here - https://github.com/vadimdemedes/ink/commit/e8e6811935271c83f5fedc412e627ca2fca16248. Will close this issue once it’s released 😉