Multiple inline widgets using factoryBuilder.

[ravinder-gs]

Steps to Reproduce

I am trying to achieve something like this

---

The code I am using,

class FootnoteWidgetsFactory extends WidgetFactory {
  final List<Child> footNotes;
  final BuildContext context;
  final AppTheme appTheme;

  FootnoteWidgetsFactory(this.footNotes, this.context, this.appTheme);

  @override
  void parse(BuildMetadata meta) {
    final e = meta.element;
    if (e.localName == 'note') {
      if (footNotes == null) super.parse(meta);
      String dataNum = e.attributes['data-id'];
      Child footNote = footNotes.firstWhere((element) {
        return element.noteId.toString() == dataNum;
      }, orElse: () => null);
      if (footNote != null) {
        meta.register(BuildOp(
          onTree: (meta, tree) {
            tree.add<BuildBit>(WidgetBit.inline(
                tree,
                GestureDetector(
                  onTap: () async {
                    await showDialog<bool>(
                      context: context,
                      builder: (BuildContext context) {
                        return OnNoteDialog(
                          title: "${footNote.title}",
                          description: "${footNote.text}",
                        );
                      },
                    );
                  },
                  child: Container(
                    padding: EdgeInsets.only(left: 6, right: 6, top: 8),
                    child: Container(
                        width: 24,
                        height: 24,
                        padding:
                            EdgeInsets.symmetric(horizontal: 6, vertical: 7.85),
                        decoration: BoxDecoration(
                          color: ThemeColors.commonColorChange(
                                  Color(0xFF474BD0), appTheme.currentTheme)
                              .withOpacity(.3),
                          borderRadius: BorderRadius.circular(5),
                        ),
                        child: SvgHelper.instance
                            .svgIcon(icon: 'assets/svg/notes.svg')),
                  ),
                )));
          },
        ));
      }

      return;
    }

    return super.parse(meta);
  }
}

the html I am using, <b>Having previously</b> <b>discussed </b>in the previous gate <b>the obligation to accept the service of G-d, I have seen it </b>to be appropriate<b> to now explain that which is most necessary</b><note data-id='1'/><b> for </b>a person who wishes to be<b> a servant of G-d, and that is </b>to<b> rely on Him in all his matters. For by doing so,</b><note data-id='2'/><b> there will be great benefits,</b><note data-id='3'/> both <b>in Torah matters</b> <b>and in worldly matters.</b><note data-id='4'/>

---

and output its giving is

Please let me know how I can fix this.

[daohoangson]

What is your HTML?

[ravinder-gs]

What is your HTML? <b>Having previously</b> <b>discussed </b>in the previous gate <b>the obligation to accept the service of G-d, I have seen it </b>to be appropriate<b> to now explain that which is most necessary</b><note data-id='1'/><b> for </b>a person who wishes to be<b> a servant of G-d, and that is </b>to<b> rely on Him in all his matters. For by doing so,</b><note data-id='2'/><b> there will be great benefits,</b><note data-id='3'/> both <b>in Torah matters</b> <b>and in worldly matters.</b><note data-id='4'/>

[daohoangson]

Sorry for the late reply. There is something special with the NOTE tag causing the tree to be built incorrectly. I switched them to SPAN and the code works as expected.

[daohoangson]

It looks like you can't self-closing the NOTE tag. Only a few tags are allowed to do that, see the list here https://developer.mozilla.org/en-US/docs/Glossary/Void_element