Fix inline rendering of (text) links

[erickok]

If non-text elements are used inside the we still need widget spans and if they are long you can still have clunky wrapping, but I'm not even sure that is a bug per se.

Fixes #388, #488 and #495

[ryan-berger]

If we add a little bit to make sure that the direct child isn't an image, would this fix also be able to replace #322 @erickok?

[erickok]

Could you reiterate the problem in that ticket?

[ryan-berger]

If an image is a child of a link, the there is still text-decoration (a blue underline) under the image when that should not be the case. It seems like this is the place where link text is built and where recursion for building children of links happens am I correct?

[erickok]

Ah I see that's this problem:

That is not directly fixed by this PR, but it's this code, yeah. I can take a look.

[erickok]

Fixed that too. The style is now only applied to the texts inside of the <a> tag, as it should have been in the first place. I also was able to further clean up (simplify) the code.

[ryan-berger]

LGTM. However, there are merge conflicts, so that just needs to be fixed and then I'll merge

[erickok]

Done.

[amanokerim]

Done.

Is it fixed?

How to use it, if currently, I am on a master branch?
flutter_html:
git:
url: https://github.com/Sub6Resources/flutter_html.git
ref: master

[erickok]

Yes this should be fixed on master.

[DFelten]

I think this MR has added a new bug.: #515

[amanokerim]

Yes this should be fixed on master.

My pubspec.yaml:

flutter_html: 
    git:
        url: https://github.com/Sub6Resources/flutter_html.git
        ref: master

Result:

Is there something I am doing wrong?

[erickok]

@amanokerim Can you provide the exact code/HTML you are using to create that output?

[amanokerim]

@erickok
HTML:

<p style="text-align:justify">Напомним, на состоявшемся 27 января выездном <a href="https://turkmenportal.com/blog/33872/prezident-turkmenistana-provel-rasshirennoe-zasedanie-gossoveta-bezopasnosti" target="_blank">расширенном заседании Государственного совета безопасности</a> Верховный Главнокомандующий Вооружёнными Силами дал поручения по дальнейшему укреплению и модернизации материально-технической базы военных и правоохранительных органов, подготовке новых, соответствующих климатическим условиям страны и высоким критериям комфортности, видов экипировки для военнослужащих.</p> 

Flutter side:

Html(
        style: {
          "body": Style(
            margin: EdgeInsets.zero,
            fontFamily: "Rubik",
            fontSize: FontSize(_s.fontSize * 19),
          ),
          "p": Style(
            margin: EdgeInsets.only(bottom: 20.0 * _s.fontSize),
            padding: EdgeInsets.symmetric(horizontal: 15.0 * _s.fontSize),
            lineHeight: 1.3,
            textAlign: TextAlign.start,
            fontSize: FontSize(18.0 * _s.fontSize),
            fontFamily: "Rubik",
            fontWeight: FontWeight.w400,
          ),
          "table": Style(
            border: Border.all(color: Colors.grey, width: .5),
            margin: EdgeInsets.all(10.0),
            // backgroundColor: Colors.blue[50],
          ),
          "tr": Style(
            border: Border.all(width: .5, color: Colors.grey),
            padding: EdgeInsets.symmetric(horizontal: 15.0 * _s.fontSize),
          ),
          "td": Style(
            padding: EdgeInsets.all(5.0 * _s.fontSize),
            height: 100.0,
          ),
          "strong": Style(
            fontWeight: FontWeight.w400,
          ),
          "a": Style(
            color: _highlightColor,
            textAlign: TextAlign.start,
          ),
          "li": Style(
            margin: const EdgeInsets.only(right: 10.0),
          ),
          "blockquote": Style(
            backgroundColor: Color(0xfff5fffc),
            color: Colors.black,
            fontWeight: FontWeight.w400,
            fontStyle: FontStyle.italic,
            margin: EdgeInsets.symmetric(horizontal: 0.0, vertical: 10.0),
            padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 10.0),
            letterSpacing: 1.1,
            border: Border(
              left: BorderSide(
                width: 5.0,
                color: _highlightColor,
              ),
            ),
          ),
        },
        customRender: {
          'img': (renderContext, child, attributes, _) => _s.imagine
              ? GestureDetector(
                  onTap: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (_) => ZoomImage(
                          imageUrl: attributes["src"],
                        ),
                        settings: RouteSettings(name: "ZoomImage"),
                      ),
                    );
                  },
                  child: Center(
                    child: CachedNetworkImage(
                      placeholder: (context, url) => Container(
                        width: double.infinity,
                        height: 200.0,
                        child: SpinKitPulse(
                          color: Theme.of(context).highlightColor,
                          size: 30.0,
                        ),
                      ),
                      imageUrl: attributes['src'],
                      errorWidget: (context, url, error) => Container(),
                    ),
                  ),
                )
              : Container(),
        },
        data: content,
        onLinkTap: (String link) {
          Uri uri = Uri.parse(link);
          if (uri.host == "turkmenportal.com") {
            // open in app
            int _id = int.parse(uri.pathSegments[1]);
            String _rub = uri.pathSegments[0], _rubb = "";
            if (_rub == "blog") _rubb = "blogs";
            if (_rub == "compositions") _rubb = _rub;
            if (_rub == "catalog") _rubb = "posts";
            if (_rub == "photoreport") _rubb = "medias";

            Navigator.of(context).push(
              MaterialPageRoute(
                builder: (BuildContext context) {
                  if (_rubb == 'medias')
                    return PhotoreportList(
                      id: _id,
                      ln: _s.ln,
                      rubrics: rubrics,
                    );
                  else
                    return DetailScreen(
                      id: _id,
                      ln: _s.ln,
                      rubrics: _rubb,
                      heroTag: _rubb + _id.toString(),
                    );
                },
                settings: RouteSettings(
                  name: _rubb == 'medias' ? "PhotoreportList" : "DetailScreen",
                ),
              ),
            );
          } else
            launchUrl(link);
        },
        onImageTap: (link) {
          Navigator.of(context).push(
            MaterialPageRoute(
              builder: (context) => ZoomImage(imageUrl: link),
              settings: RouteSettings(name: "ZoomImage"),
            ),
          );
        },
      )

[erickok]

Seems to be working just fine. Can you do a flutter clean and rebuild?

[amanokerim]

flutter clean didn't work for me.
I commented flutter_html from pubspec.yaml and tried to run, then uncommented and run. Then it started to download the latest commit. (In case this could be helpful for someone).

Thank you very much for all. Good luck!