Constraint text to not overflow their parent

[dwelle]

Precursor to sticky notes #1428 and text blocks #4267

In the first iteration, we decided to go with the model that FigJam or tldraw are using: as you type text, break it onto more lines if it overflows. If you run out of space for lines, increase the container height.

Reflowing

Size we can't easily depend on each change happening linearly, character-by-character (user pastes, user deletes or adds text in the middle), each change should result in reflowing the whole sticky note (we can later optimize this if we run into performance issues). Similarly, when user resizes the container.

Reflowing should work like this:

1. split the text into lines

2. for each line, check if it overflows

3. if it overflows, split the line into words (prefer to break on space). Wrap the word onto new line. Check the previous line overflow again, otherwise repeat.

   1. We need to account words that span the whole line (width of container). If you break them onto new line, the previous line will be empty, and the next line will still overflow, and you'll repeat ad infinitum. So you'll need to detect this, and instead of on space, break the word in two so that the line's space it was sitting on is fully used up:

      

4. Repeat for next lines.

5. If it still overflows, increase height until it does not.

---

Other notes

• We should still support text alignments I suppose so we may need to account for that during reflow.
• Once a text element is tied to a container (e.g. via some custom property such as ExcalidrawTextElement.textContainer: /* id */ string, it should not be allowed to be repositioned or edited in other ways other than editing the text contents.

[ad1992]

closing this as we support binding text to shapes now https://twitter.com/aakansha1216/status/1471509326674030592