You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Don't see a tag or attribute you need? File a feature request or contribute to the project!
110
129
111
130
## Why this package?
@@ -122,14 +141,24 @@ For a full example, see [here](https://github.com/Sub6Resources/flutter_html/tre
122
141
123
142
Below, you will find brief descriptions of the parameters the`Html` widget accepts and some code snippets to help you use this package.
124
143
144
+
## Constructors:
145
+
146
+
The package currently has two different constructors - `Html()` and `Html.fromDom()`.
147
+
148
+
The `Html()` constructor is for those who would like to directly pass HTML from the source to the package to be rendered.
149
+
150
+
If you would like to modify or sanitize the HTML before rendering it, then `Html.fromDom()` is for you - you can convert the HTML string to a `Document` and use its methods to modify the HTML as you wish. Then, you can directly pass the modified `Document` to the package. This eliminates the need to parse the modified `Document` back to a string, pass to `Html()`, and convert back to a `Document`, thus cutting down on load times.
151
+
125
152
### Parameters:
126
153
127
154
| Parameters | Description |
128
155
|--------------|-----------------|
129
-
|`data`| The HTML data passed to the `Html` widget. This is required and cannot be null. |
156
+
|`data`| The HTML data passed to the `Html` widget. This is required and cannot be null when using `Html()`. |
157
+
|`document`| The DOM document passed to the `Html` widget. This is required and cannot be null when using `Html.fromDom()`. |
130
158
|`onLinkTap`| A function that defines what the widget should do when a link is tapped. The function exposes the `src` of the link as a `String` to use in your implementation. |
131
159
|`customRender`| A powerful API that allows you to customize everything when rendering a specific HTML tag. |
132
160
|`onImageError`| A function that defines what the widget should do when an image fails to load. The function exposes the exception `Object` and `StackTrace` to use in your implementation. |
161
+
|`omMathError`| A function that defines what the widget should do when a math fails to render. The function exposes the parsed Tex `String`, as well as the error and error with type from `flutter_math` as a `String`. |
133
162
|`shrinkWrap`| A `bool` used while rendering different widgets to specify whether they should be shrink-wrapped or not, like `ContainerSpan`|
134
163
|`onImageTap`| A function that defines what the widget should do when an image is tapped. The function exposes the `src` of the image as a `String` to use in your implementation. |
135
164
|`blacklistedElements`| A list of elements the `Html` widget should not render. The list should contain the tags of the HTML elements you wish to blacklist. |
@@ -139,7 +168,7 @@ Below, you will find brief descriptions of the parameters the`Html` widget accep
139
168
140
169
### Data:
141
170
142
-
The HTML data passed to the `Html` widget as a `String`. This is required and cannot be null.
171
+
The HTML data passed to the `Html` widget as a `String`. This is required and cannot be null when using `Html`.
143
172
Any HTML tags in the `String` that are not supported by the package will not be rendered.
144
173
145
174
#### Example Usage - Data:
@@ -160,6 +189,36 @@ Widget html = Html(
160
189
);
161
190
```
162
191
192
+
### Document:
193
+
194
+
The DOM document passed to the `Html` widget as a `Document`. This is required and cannot be null when using `Html.fromDom()`.
195
+
Any HTML tags in the document that are not supported by the package will not be rendered.
196
+
Using the `Html.fromDom()` constructor can be useful when you would like to sanitize the HTML string yourself before passing it to the package.
197
+
198
+
#### Example Usage - Document:
199
+
200
+
```dart
201
+
import 'package:html/parser.dart' as htmlparser;
202
+
import 'package:html/dom.dart' as dom;
203
+
...
204
+
String htmlData = """<div>
205
+
<h1>Demo Page</h1>
206
+
<p>This is a fantastic product that you should buy!</p>
A function that defines what the widget should do when a link is tapped.
@@ -283,6 +342,24 @@ Widget html = Html(
283
342
);
284
343
```
285
344
345
+
### onMathError:
346
+
347
+
A function that defines what the widget should do when a math fails to render. The function exposes the parsed Tex `String`, as well as the error and error with type from `flutter_math` as a `String`.
348
+
349
+
#### Example Usage - onMathError:
350
+
351
+
```dart
352
+
Widget html = Html(
353
+
data: """<!-- Some MathML string that fails to parse -->""",
//your logic here. A Widget must be returned from this function:
356
+
return Text(error);
357
+
//you can also try and fix the parsing yourself:
358
+
return Math.tex(correctedParsedTex);
359
+
},
360
+
);
361
+
```
362
+
286
363
### onImageTap:
287
364
288
365
A function that defines what the widget should do when an image is tapped.
@@ -627,6 +704,41 @@ This package renders svg elements using the [`flutter_svg`](https://pub.dev/pack
627
704
628
705
When rendering SVGs, the package takes the SVG data within the `<svg>` tag and passes it to `flutter_svg`. The `width` and `height` attributes are considered while rendering, if given.
629
706
707
+
### MathML
708
+
709
+
This package renders MathML elements using the [`flutter_math`](https://pub.dev/packages/flutter_math) plugin.
710
+
711
+
When rendering MathML, the package takes the MathML data within the `<math>` tag and tries to parse it to Tex. Then, it will pass the parsed string to `flutter_math`.
712
+
713
+
Because this package is parsing MathML to Tex, it may not support some functionalities. The current list of supported tags can be found [above](#currently-supported-html-tags), but some of these only have partial support at the moment.
714
+
715
+
If the parsing errors, you can use the [onMathError](#onmatherror) API to catch the error and potentially fix it on your end - you can analyze the error and the parsed string, and finally return a new instance of `Math.tex()` with the corrected Tex string.
716
+
717
+
If you'd like to see more MathML features, feel free to create a PR or file a feature request!
718
+
719
+
### Tex
720
+
721
+
If you have a Tex string you'd like to render inside your HTML you can do that using the same [`flutter_math`](https://pub.dev/packages/flutter_math) plugin.
722
+
723
+
Use a custom tag inside your HTML (an example could be `<tex>`), and place your **raw** Tex string inside.
724
+
725
+
Then, use the `customRender` parameter to add the widget to render Tex. It could look like this:
0 commit comments