Is it possible to detect if buildText is not run?

[mark8044]

Right now I have mixed image and text being rendered, but primarily text.

I have a Padding widget which surrounds my content which I have inserted during buildText in my WidgetFactory

  Widget? buildText(BuildMetadata meta, TextStyleHtml tsh, InlineSpan text) {
    var built = super.buildText(meta, tsh, text);

    if (built != null) {

            built = _TextPadding(built, textPadding);
(...)

class _TextPadding extends StatelessWidget {
  final Widget child;
  final double padding;

  const _TextPadding(this.child, this.padding, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext _) =>
      Padding(
          child: child,
          padding: EdgeInsets.symmetric(horizontal: padding));
}

However, sometimes my content is only an image, with no text and so in those cases, the image is rendered without any padding. In these cases I wanted to add my _TextPadding to the buildImage as well.

However, if I add it to buildImage, then the images will always have a padding. I only want to add the padding only if the image is alone and no buildText was run. I'm also going to selectively apply it only to certain images (depending on their meta.element.classes.contains())

Is there an easy way to determine if buildImage was run and buildText was not run? ie. the content has no text, its just an image

[daohoangson]

You can define your own RenderMode and check WidgetPlaceholders in the buildBodyWidget I think.

[mark8044]

Do you know of an example floating around anywhere? I don't exactly follow

Thanks 👍

[daohoangson]

I have just re-read your question, if you need padding for everything, why don't you just wrap a Padding widget around the HtmlWidget directly?

[mark8044]

I removed Padding from HtmlWidget because I need to have images go edge to edge, so all text would get padded but images should be edge to edge. So you were the one who came up with the above solution, which has been brilliant so far.

But now I need further refinement, in that certain images (smilies) should not go edge to edge. So I have created a unique class for smilie images which is different from all other images, in order to attempt to keep smilies within the textPadding. This is actually working very well when the smilie is surrounded by text, however when the smilie is alone then it will be treated as any other image and try to place it edge to edge which looks wrong. Since smilies are seen by people as something like text and should be within the padded area

Thanks!

[daohoangson]

Ah, this is an interesting use case, I have that text-padding behavior in a couple of my apps too. The article looks way nicer this way.

This package has an optimization logic when it renders a text paragraph: if there is no text and exactly one inline widget, it will skip the RichText entirely. For this use case, I think we can render an additional inline widget for each image to bypass the optimization.

[daohoangson]

I got it to work, with this wf:

class MyWidgetFactory extends WidgetFactory {
  @override
  Widget? buildText(BuildMetadata meta, TextStyleHtml tsh, InlineSpan text) {
    var built = super.buildText(meta, tsh, text);
    if (built != null) {
      built = _TextPadding(built);
    }
    return built;
  }

  @override
  InlineSpan? buildTextSpan({
    List<InlineSpan>? children,
    GestureRecognizer? recognizer,
    TextStyle? style,
    String? text,
  }) {
    final built = super.buildTextSpan(
      children: children,
      recognizer: recognizer,
      style: style,
      text: text,
    );

    if (built is WidgetSpan && children != null) {
      if (children.length == 1 && built == children.first) {
        // most likely an inline image in its own paragraph, let's wrap it in our text padding widget
        return WidgetSpan(
          alignment: built.alignment,
          baseline: built.baseline,
          style: built.style,
          child: _TextPadding(built.child),
        );
      }
    }

    return built;
  }
}

It will render this HTML...

<p>This is some text</p>

<p>
  Foo
  <img src="https://via.placeholder.com/200x20?text=between%20texts" style="width: 200; height: 20" />
  bar
</p>

<p><img src="https://via.placeholder.com/200x20?text=inline,%20alone" style="width: 200; height: 20" /></p>

<img src="https://via.placeholder.com/2000x200?text=display:%20block" style="display: block" />

<p>Bye...</p>

Into this: