Ink: Long strings wrap outside of parent component

[icopp]

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]

Could you paste ipsum value too?

[icopp]

In this case it's just straight from a lorem ipsum generator: "Elit consequat exercitation est Lorem dolor sunt labore. Esse id aliqua velit elit duis commodo veniam quis dolore commodo dolore reprehenderit. Lorem aliquip aliquip velit non pariatur commodo voluptate adipisicing esse. Aliquip ipsum fugiat commodo laborum dolor culpa Lorem consequat quis. Tempor eu occaecat veniam reprehenderit. Incididunt occaecat in sit aute velit ad reprehenderit sunt sunt. Ex dolore commodo enim aliqua qui aliquip esse velit officia.\n\nUt quis ea dolore aliquip exercitation sunt cupidatat exercitation ut do minim deserunt minim enim. Reprehenderit ad dolor mollit commodo pariatur laborum eiusmod laboris laboris ullamco exercitation. Ullamco deserunt laboris esse ullamco culpa.\n\nAliquip ut sunt culpa incididunt nisi aliqua dolor amet exercitation deserunt velit sit est irure. Eiusmod ad amet aliqua velit elit voluptate. Ut et consequat esse ad id duis non enim voluptate sunt occaecat duis esse qui. Dolore magna aliqua excepteur cupidatat duis dolor sint proident eu et quis eu.\n\nNostrud officia officia nulla eiusmod reprehenderit occaecat minim amet velit. Consectetur veniam ea culpa aliquip nisi. Cupidatat eu id tempor fugiat commodo velit id cillum.\n\nOccaecat consequat sint tempor ex elit consectetur irure. Sit amet esse qui tempor et qui ad est exercitation aute eu Lorem nisi. Cillum commodo tempor cupidatat culpa incididunt consectetur qui ut ea exercitation labore elit reprehenderit non. Officia dolor ad laboris nisi consectetur voluptate aliquip duis Lorem esse qui nisi sit adipisicing. Labore elit aliquip cillum culpa sunt ea sit ad incididunt ut eu. Laboris ipsum mollit ea dolore eiusmod quis aliqua eiusmod ullamco."

[vadimdemedes]

Yep, I should've opened an issue for that. Ink needs to have wrapping inside individual nodes. Will reply back when I have some progress on that.

[vadimdemedes]

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

[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 ❤️

[SimenB]

Still works beautifully 👌

[maticzav]

Same here 🎉

[vadimdemedes]

New release is out, which adds textWrap prop - https://github.com/vadimdemedes/ink/releases/tag/v2.1.0 🎆