Comments (7)
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.
from flutter_tex.
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),
),
);
}
}
from flutter_tex.
Same issue
from flutter_tex.
Can confirm this issue.
from flutter_tex.
"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
from flutter_tex.
It's been fixed, try wit the latest version.
from flutter_tex.
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.
from flutter_tex.
Related Issues (20)
- A problem with uesing it
- TeX not parsed
- MathML tags (mfrac) parsing issue
- Add support for macOS HOT 1
- flutter Web build Works on debug mode but not working after deployment
- Image Rendering Issue
- Loading widget HOT 1
- Give height to TeXViewDocument HOT 1
- How to Set it for Window and Linux support
- Need Text which support like Overleaf template, support
- need markdown and math togethor,how can impement on this HOT 1
- config
- Can't show LaTEX text on iOS HOT 2
- .woff/.woff2 fonts cause "ITMS-90853: Invalid font" rejection from appstoreconnect
- Black Screen HOT 1
- favicon.con error
- I have tried the <ol> tag, but the number list does not appear. HOT 6
- Font not changing in TeXView widget despite specifying custom font in pubspec.yaml HOT 2
- Iframe issue unable to click on any button on dialog box above this widget HOT 5
- List in markdown is not rendering the bullet HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from flutter_tex.