Remove official tex support and add note in README for customRender instructions

tneotia · tneotia · commit d7550d74363a · 2021-03-18T12:41:31.000-04:00
diff --git a/README.md b/README.md
@@ -107,7 +107,7 @@ Add the following to your `pubspec.yaml` file:
 | `samp` | `section`   | `small`   | `span`| `strike`    | `strong`| `sub`   | `sup` | `summary` | `svg`| `table`| 
 | `tbody` | `td` | `template` | `tfoot`   | `th`  | `thead`     |`time`   | `tr`    | `tt`  | `u`  | `ul` |
 | `var` | `video` |  `math`:  |  `mrow`  |  `msup`    | `msub`  |  `mover`   | `munder`  | `msubsup`  | `moverunder`   | `mfrac`  | 
-| `mlongdiv` | `msqrt` |  `mroot`  |  `mi`  |  `mn`    | `mo`  | `tex` (custom tag for this package)  |   |   |    |   | 
+| `mlongdiv` | `msqrt` |  `mroot`  |  `mi`  |  `mn`    | `mo`  |  |   |   |    |   | 
 
  
 ## Currently Supported CSS Attributes:
@@ -718,11 +718,26 @@ If you'd like to see more MathML features, feel free to create a PR or file a fe
 
 ### Tex
 
-If you have a Tex string you'd like to render inside your HTML you can do that!
+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.
 
-Use the custom `<tex>` tag inside your HTML, and place your **raw** Tex string inside. The package uses the same logic as MathML rendering above, but doesn't need to parse the string, of course.
+Use a custom tag inside your HTML (an example could be `<tex>`), and place your **raw** Tex string inside.
  
-The rendering error will also be called if your Tex string fails to render.
+Then, use the `customRender` parameter to add the widget to render Tex. It could look like this:
+
+```dart
+Widget htmlWidget = Html(
+  data: r"""<tex>i\hbar\frac{\partial}{\partial t}\Psi(\vec x,t) = -\frac{\hbar}{2m}\nabla^2\Psi(\vec x,t)+ V(\vec x)\Psi(\vec x,t)</tex>""",
+  customRender: {
+    "tex": (_, __, ___, element) => Math.tex(
+      element.text,
+      onErrorFallback: (FlutterMathException e) {
+        //return your error widget here e.g.
+        return Text(e.message);
+      },
+    ),
+  }
+);
+```
 
 ### Table
 
diff --git a/lib/src/html_elements.dart b/lib/src/html_elements.dart
@@ -87,7 +87,6 @@ const REPLACED_ELEMENTS = [
   "rt",
   "ruby",
   "math",
-  "tex",
 ];
 
 const LAYOUT_ELEMENTS = [
diff --git a/lib/src/replaced_element.dart b/lib/src/replaced_element.dart
@@ -275,20 +275,17 @@ class MathElement extends ReplacedElement {
   MathElement({
     required this.element,
     this.texStr,
-    String name = "[[MathElement]]",
+    String name = "math",
   }) : super(name: name, alignment: PlaceholderAlignment.middle, style: Style());
 
   @override
   Widget toWidget(RenderContext context) {
-    if (element.localName == "math") {
-      texStr = parseMathRecursive(element, r'');
-    }
+    texStr = parseMathRecursive(element, r'');
     return Container(
-      width: element.localName == "math" ?
-        MediaQuery.of(context.buildContext).size.width : null,
+      width: MediaQuery.of(context.buildContext).size.width,
       child: Math.tex(
         texStr ?? '',
-        mathStyle: element.parent!.localName != "body" ? MathStyle.text : MathStyle.display,
+        mathStyle: MathStyle.display,
         textStyle: context.style.generateTextStyle(),
         onErrorFallback: (FlutterMathException e) {
           if (context.parser.onMathError != null) {
@@ -433,11 +430,6 @@ ReplacedElement parseReplacedElement(
       return MathElement(
         element: element,
       );
-    case "tex":
-      return MathElement(
-        element: element,
-        texStr: element.text,
-      );
     default:
       return EmptyContentElement(name: element.localName == null ? "[[No Name]]" : element.localName!);
   }

-Original file line number
+Diff line change
   "rt",
   "ruby",
   "math",
 -  "tex",
 ];
 const LAYOUT_ELEMENTS = [