[BUG] Latex rendering problem in web [WEB CRASH]

[NTJ3]

Describe the bug:

We are using flutter_html package to render html and latex together. But with below html string web is crashing HTML string:

The number of distinct solutions of the equation<tex>\frac{4}{5}</tex>cos<sup>2</sup>2x+cos<sup>4</sup>x+sin<sup>4</sup>x+cos<sup>6</sup>x+sin<sup>6</sup>x=2 in the interval <tex>\left[0,2\pi\right]</tex> is<u>________</u>.t

HTML to reproduce the issue:

Html widget configuration:

   return Html(
      shrinkWrap: true,
      data:"The number of distinct solutions of the equation<tex>\frac{4}{5}</tex>cos<sup>2</sup>2x+cos<sup>4</sup>x+sin<sup>4</sup>x+cos<sup>6</sup>x+sin<sup>6</sup>x=2 in the interval <tex>\left[0,2\pi\right]</tex> is<u>________</u>.t",
      customRender: {
        'tex': (renderContext, _) {
          //some long latex equations/expressions are too long and cause an
          //overflow so we need to break them down with the instructions below
          final longEq = Math.tex(renderContext.tree.element!.text);
          final breakResult = longEq.texBreak();
          final widget = Padding(
            padding: const EdgeInsets.all(3),
            child: Wrap(
              runSpacing: 5,
              children: breakResult.parts,
            ),
          );
          return widget;
        }
      },
      tagsList: Html.tags..add('tex'),
    );

Expected behavior:

It should render as pic below

Screenshots:

Device details and Flutter/Dart/flutter_html versions:

Flutter Version: 3.3.4 flutter_html: ^2.2.1 flutter_math_fork: 0.5.0 Stacktrace/Logcat

Additional info:

A picture of a cute animal (not mandatory but encouraged)

[erickok]

You can't really add a Wrap in a custom render, because Flutter doesn't support such layout widgets in a RichtText (which is essentially what Html is). Instead you should try to break up the latex itself in parts before offering the html to Html. Alternatively you can use a custom render which splits the latex (which I think you already do in texBreak?) and return it as InlineSpan.

[NTJ3]

I have removed Wrap @erickok but it's didn't work out Can we have quick meet if you available?

[Sub6Resources]

Updating your configuration with the latest 3.0.0-beta.1 gives me the following, which worked when I tested it on flutter web (with both renderers) and MacOS.

return Html(
      shrinkWrap: true,
      data:r"The number of distinct solutions of the equation<tex>\frac{4}{5}</tex>cos<sup>2</sup>2x+cos<sup>4</sup>x+sin<sup>4</sup>x+cos<sup>6</sup>x+sin<sup>6</sup>x=2 in the interval <tex>\left[0,2\pi\right]</tex> is<u>________</u>.",
      extensions: [
        TagExtension(
          tagsToExtend: {'tex'},
          builder: (extContext) {
            final longEq = Math.tex(extContext.element!.text);
            final breakResult = longEq.texBreak();
            return CssBoxWidget.withInlineSpanChildren(
              style: extContext.styledElement!.style,
              children: breakResult.parts.map((child) {
                return WidgetSpan(child: child);
              }).toList(),
            );
          },
        )
      ],
    );