[SuperEditor][SuperReader][SuperText][AttributedText] - Leading and trailing space around desired text fragments

[matthew-carroll]

Consider inline code styling. Inline code typically includes 3 elements different from the text around it: a monospace font, a rounded rectangle behind the text, and extra space at the leading and trailing edge of every such rectangle.

There are some other use-cases that want something similar.

The most complete way to implement such a capability is a line-based flow layout, which supports arbitrary widgets within text, within widgets, within text, etc. But this requires a re-write of Flutter's RenderParagraph and even the text painter.

At the moment, we already support custom fonts for text runs. We also support displaying highlights with rounded corners behind arbitrary text runs. The one thing we're missing is the extra space at the leading and trailing edges of those background rectangles.

Without a new text layout system, I don't think we can add space at the leading and trailing edge of every rectangle (consider multiple lines of wrapped text). However, I do believe we can hack some space at the leading and trailing edge of the entire inline code text block:

This is regular text and |---this is hypothetical inline code---|.

Flutter supports widgets within text. Flutter's problem is that it doesn't apply line-based layout to said widgets. However, in this case, we should be able to use Flutter's standard inline widget behavior to add SizedBoxs just before and after the desired text run. From there, we need to update selection computation to never allow selection of just the SizedBox. E.g., the caret either sits to the left of the leading SizedBox, or the caret sits to the right of the first character in the code box.