On web, using multiple TeXViews does not work. Only the last will render. about flutter_tex

[copilot0001]

If you guys are failing to load it properly, enlighten yourself on how this architecture works whether, in Vue, React js or nuxt, or next, pass data to a child component, they will work accordingly.

[magnus-ISU]

An example app to showcase the problem:

import 'package:flutter/material.dart';
import 'package:flutter_tex/flutter_tex.dart';

void main() {
	runApp(MyApp());
}

class MyApp extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
		return MaterialApp(
			title: 'WYSIWYG Text Editor with LaTeX Support',
			theme: ThemeData(
				primarySwatch: Colors.blue,
			),
			home: MyHomePage(),
		);
	}
}

class MyHomePage extends StatefulWidget {
	@override
	_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
	final TextEditingController editingController = TextEditingController();
	final List<String> _lines = [];
	int editingLine = 0;

	void setEditingLine(int i) {
		editingLine = i;
		editingController.text = _lines[i];
	}

	@override
	void initState() {
		super.initState();
		_lines.add("Add some \\( \\LaTeX \\) here!");
		_lines.add("This is a cool equation: \\[ \\sum_{n=0}^\\infty b^n = \\frac 1 {1-b} \\]");
		_lines.add("This line has no cool equations :(");
		_lines.add("But this is a good opportunity to try other things too though");
		_lines.add("I just don't know if it is worth it");
		_lines.add("But you can do whatever you want you know");
		setEditingLine(3);
	}

	@override
	Widget build(BuildContext context) {
		return Scaffold(
			appBar: AppBar(
				title: const Text('WYSIWYG Text Editor with LaTeX Support'),
			),
			body: Padding(
				padding: const EdgeInsets.all(8.0),
				child: SingleChildScrollView(
					child: Column(
						crossAxisAlignment: CrossAxisAlignment.stretch,
						children: [
							TeXView(
								child: TeXViewGroup(
									children: [
										for (int i = 0; i < editingLine; i += 1)
											TeXViewGroupItem(
												id: i.toString(),
												child: TeXViewDocument(_lines[i]),
											),
									],
									onTap: (id) => {
										print(id),
										setState(() {
											setEditingLine(int.parse(id));
										})
									},
								),
								renderingEngine: const TeXViewRenderingEngine.katex(),
							),
							TextFormField(
								autofocus: true,
								controller: editingController,
								decoration: const InputDecoration(
									border: OutlineInputBorder(),
									hintText: 'Enter LaTeX equation',
								),
								onChanged: (text) {
									setState(() {
										_lines[editingLine] = text;
									});
								},
								onFieldSubmitted: (text) {
									setState(() {
										_lines.add("");
										setEditingLine(_lines.length - 1);
									});
									print("Done editing!");
								},
							),
							TeXView(
								child: TeXViewGroup(
									children: [
										for (int i = editingLine + 1; i < _lines.length; i += 1)
											TeXViewGroupItem(
												id: i.toString(),
												child: TeXViewDocument(_lines[i]),
											),
									],
									onTap: (id) => {
										print(id),
										setState(() {
											setEditingLine(int.parse(id));
										})
									},
								),
								renderingEngine: const TeXViewRenderingEngine.katex(),
							),
						],
					),
				),
			),
			floatingActionButton: FloatingActionButton(
				onPressed: () {
					setState(() {
						_lines.add("new line");
						setEditingLine(_lines.length - 1);
					});
				},
				child: const Icon(Icons.add),
			),
		);
	}
}

[ryanjacktaylor]

Same issue

[Schloool]

Can confirm this issue.

[StroeAndreX]

"Only the last will render"
I was looking at the package and notice that it's not that Only the last will render, but it's the JavaScript code that only returns the height of the last TeXView.

In the tex_view_web.dart file the iFrame(HtmlElementView) is inside a SizedBox that has an initial height of 1px.

Widget build(BuildContext context) {
    _initTeXView();

    return SizedBox(
      height: widgetHeight,
      child: HtmlElementView(
        key: widget.key ?? ValueKey(_viewId),
        viewType: _viewId,
      ),
    );
}

Once the rendering is done the javascript code should return the real height of the frame. But it's not the case when you render multiple TeXView at the same time as it only returns the height for the last TeXView. Meaning that the first ones still have the height at 1px

I don't really have the knowledge to fix the Javascript. It should be something about the viewId, but I might be wrong.
A raw solution I found with the current state is to render the TeXView sequentially. Once the first TeXView has rendered, start rendering the second one and so on...

  List<Widget> teXViews = [];
  Future<void> buildTeXViews() async {
    setState(() {
      teXViews.add(
        TeXView(
            key: UniqueKey(),
            loadingWidgetBuilder: (x) {
              return const CircularProgressIndicator();
            },
            onRenderFinished: (height) {
              /// Render the second one...
              /// teXViews.add(the other TeXView...)
            },
            child: const TeXViewDocument(
              r"""<p style="background-color: #FFFFFF; width: 90%;">Il composto \(\mathrm{CH}_3 \mathrm{COOH} \) è:</p>""",
            )),
      );
    });
  }

This version of the package seems to be very raw as it has some bugs(especially android and web) and some bad consistency. It looks like the tex_view_web.dart does not have the "loadingWidgetBuilder" and also I would've use "ValueListenableBuilder" to keep the height updated.

This is a fast solution I came up with now... I might take some time to look more carefully.

IMPORTANT EDIT:
It also look like tex_view_web.dart does not have callback for the "onRendererFinished". I've forked faisal-kabir/math_text package and fixed some of these little mistakes.
faisal-kabir/math_text also have important WebViews bug fixes for Android!

Forked Project with little fixes
Before using read all of this carefully <3

[shah-xad]

It's been fixed, try wit the latest version.

[Schloool]

The issue still exists in the latest version 4.0.6.
I use the following structure to instantiate multiple TeX-views:

TeXView(
        renderingEngine: const TeXViewRenderingEngine.katex(),
        child: TeXViewDocument(
          formattedContent,
        ),
        style: TeXViewStyle(
          textAlign: alignment,
          fontStyle: TeXViewFontStyle(
            fontSize: textStyle.fontSize!.toInt(),
            fontFamily: textStyle.fontFamily,
          ),
          contentColor: textStyle.color,
          backgroundColor: Colors.transparent,
        ),
      )

While everything works fine on mobile, in web only the last TeX-view is rendered.