Fix shrinkWrap by flowing the text to a new line for block elements

[erickok]

Fixes #565 and #671.

The same approach is used as PR #679 where a new line is inserted (when using shrinkWrap) for block element. The difference is that the insertion is done directly when processing block style elements.

No support for list items when using shrinkWrap, though this can be easily added I think. Tables and text aligning support is untested.

For example, this code:

        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              color: Colors.yellow,
              child: Html(
                data: "<strong>shrinkWrap: </strong> false",
                shrinkWrap: false,
              ),
            ),
            Container(
              color: Colors.orange,
              child: Html(
                data: "<h2>shrinkWrap</h2><p>use <strong>shrinkWrap</strong> to minimize the widget size</p><h2>false</h2>shrinkWrap is NOT enabled here",
                shrinkWrap: false,
              ),
            ),
            Container(
              color: Colors.yellow,
              child: Html(
                data: "<strong>shrinkWrap: </strong> true",
                shrinkWrap: true,
              ),
            ),
            Container(
              color: Colors.orange,
              child: Html(
                data: "<h2>shrinkWrap</h2><p>use <strong>shrinkWrap</strong> to minimize the widget size</p><h2>true</h2>shrinkWrap is enabled here",
                shrinkWrap: true,
              ),
            ),
          ],
        )

There is still a small issue with replaced elements, where a new line should be inserted but it is not. I am debugging that still.

[erickok]

Hmmm actually it is not working for all cases. I need to rethink my solution, based off what @tneotia already has done.

[tneotia]

Your solution actually might work... You may also need to add the new lines in the "inline element" parseTree (last return statement).

If you see my PR I use the indices in the block element WidgetSpan and the very last TextSpan in the else condition.

[erickok]

@tneotia Indeed, nice! I think this works.

[tneotia]

Yep looks good, nice work. You do a good job with lists & list manipulation, I've seen in other PRs as well! Much cleaner than what I had.

[erickok]

@ryan-berger Could you review this?

[ryan-berger]

This seems acceptable to me. Looking at the HTML spec, it seems that this is done anyway.

I'm fine with merging this now as it serves a purpose, but I'm wondering if we could use some sort of Flex class to achieve this functionality as well.

Either way, LGTM

[asmith20002]

@tneotia @erickok Thank you for the time you put into this. Much appreciated!

[erickok]

@ryan-berger Wrap works solely on widgets but we need to be in the 'span world' for our texts, so that won't quite help.