feat(ib): initial beta support for Mathjax forumulas

* This is an initial support for Mathjax forumulas which is implemented using flutter_math_fork.
* Formulas which includes {equation} for auto-numbering, {tag} for custom numbering, [ ], $$ $$ multi-line
formulas are unsupported by flutter_math_fork.
* 75% of the formulas used are working as expected and this initial support should be counted as a baby
step towards the stability of future Mathjax formulas.
* Flutter_markdown allows either all the selectable widgets in the content or none which means our
non-selectable custom Widget which renders Mathjax will break down the support for selectable texts all
over Interactive Book. If we enable selectable, Mathjax widget will not render inline like normal
paragraph texts instead it will be in a new-line behaving like a block widget with line breaks.

(I have won but at what cost Meme here)
https://i.redd.it/lwq00qbbna841.png

Signed-off-by: Manjot Sidhu <manjot.techie@gmail.com>

lib/ui/views/ib/builders/ib_mathjax_builder.dart

@@ -0,0 +1,41 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_markdown/flutter_markdown.dart';
+import 'package:flutter_math_fork/flutter_math.dart';
+import 'package:markdown/markdown.dart' as md;
+
+/// IbMathjaxBuilder builds RichText widget for the Mathjax Support.
+///
+/// It will be inserted/merged inline only if selectable is set to false
+/// which means neighbouring widgets should also be RichText so that
+/// their children's are merged together otherwise it's rendered
+/// as any other block widget with line breaks.
+class IbMathjaxBuilder extends MarkdownElementBuilder {
+  IbMathjaxBuilder();
+
+  @override
+  Widget visitElementAfter(md.Element element, TextStyle preferredStyle) {
+    var _content = element.textContent.trim();
+
+    return RichText(
+      text: TextSpan(
+        children: [
+          TextSpan(
+            // Intentional Nesting due to a bug in flutter_markdown
+            children: [
+              WidgetSpan(
+                child: SizedBox(
+                  child: Wrap(
+                    spacing: 1.0,
+                    runSpacing: 5.0,
+                    direction: Axis.vertical,
+                    children: <Widget>[Math.tex(_content)],
+                  ),
+                ),
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/ui/views/ib/ib_page_view.dart

@@ -11,6 +11,7 @@ import 'package:mobile_app/models/ib/ib_page_data.dart';
 import 'package:mobile_app/ui/views/base_view.dart';
 import 'package:mobile_app/ui/views/ib/builders/ib_chapter_contents_builder.dart';
 import 'package:mobile_app/ui/views/ib/builders/ib_interaction_builder.dart';
+import 'package:mobile_app/ui/views/ib/builders/ib_mathjax_builder.dart';
 import 'package:mobile_app/ui/views/ib/builders/ib_pop_quiz_builder.dart';
 import 'package:mobile_app/ui/views/ib/builders/ib_subscript_builder.dart';
 import 'package:mobile_app/ui/views/ib/builders/ib_superscript_builder.dart';
@@ -19,6 +20,7 @@ import 'package:mobile_app/ui/views/ib/syntaxes/ib_embed_syntax.dart';
 import 'package:mobile_app/ui/views/ib/syntaxes/ib_filter_syntax.dart';
 import 'package:mobile_app/ui/views/ib/syntaxes/ib_inline_html_syntax.dart';
 import 'package:mobile_app/ui/views/ib/syntaxes/ib_liquid_syntax.dart';
+import 'package:mobile_app/ui/views/ib/syntaxes/ib_mathjax_syntax.dart';
 import 'package:mobile_app/ui/views/ib/syntaxes/ib_md_tag_syntax.dart';
 import 'package:mobile_app/utils/url_launcher.dart';
 import 'package:mobile_app/viewmodels/ib/ib_page_viewmodel.dart';
@@ -130,11 +132,11 @@ class _IbPageViewState extends State<IbPageView> {
     final _inlineBuilders = {
       'sup': IbSuperscriptBuilder(),
       'sub': IbSubscriptBuilder(),
+      'mathjax': IbMathjaxBuilder(),
     };
 
     return MarkdownBody(
       data: data.content,
-      selectable: true,
       imageDirectory: EnvironmentConfig.IB_BASE_URL,
       imageBuilder: _buildMarkdownImage,
       onTapLink: _onTapLink,
@@ -159,6 +161,7 @@ class _IbPageViewState extends State<IbPageView> {
         ],
         [
           IbInlineHtmlSyntax(builders: _inlineBuilders),
+          IbMathjaxSyntax(),
           md.EmojiSyntax(),
           ...md.ExtensionSet.gitHubFlavored.inlineSyntaxes,
         ],

lib/ui/views/ib/syntaxes/ib_mathjax_syntax.dart

@@ -0,0 +1,19 @@
+import 'package:markdown/markdown.dart' as md;
+
+class IbMathjaxSyntax extends md.InlineSyntax {
+  IbMathjaxSyntax() : super(_pattern);
+
+  /// This is not the perfect pattern for any Mathjax formula
+  /// It's made in accordance to what flutter_math_fork works with
+  /// [ ], $$ $$ and muti-line formulas are unsupported
+  static const String _pattern = r'\$([^$\n\r]+)\$';
+
+  @override
+  bool onMatch(md.InlineParser parser, Match match) {
+    if (match[1] != null) {
+      parser.addNode(md.Element.text('mathjax', match[1]));
+    }
+
+    return true;
+  }
+}

pubspec.lock

@@ -322,7 +322,7 @@ packages:
     source: git
     version: "0.6.2"
   flutter_math_fork:
-    dependency: transitive
+    dependency: "direct main"
     description:
       name: flutter_math_fork
       url: "https://pub.dartlang.org"

pubspec.yaml

@@ -55,6 +55,7 @@ dependencies:
   html_unescape: ^2.0.0
   hive: ^2.0.4
   hive_flutter: ^1.1.0
+  flutter_math_fork: ^0.3.3+1
 
 dev_dependencies:
   flutter_test:

test/ui_tests/ib/ib_page_view_test.dart

@@ -88,9 +88,13 @@ void main() {
       expect(find.byType(FloatingActionButton), findsNWidgets(2));
 
       // Finds IbContent Widgets
-      expect(find.text('Interactive-Book'), findsOneWidget);
-      expect(find.text('Learn Digital Logic Design easily.'), findsOneWidget);
-      expect(find.text('Audience'), findsOneWidget);
+      expect(find.byWidgetPredicate((widget) {
+        return widget is RichText &&
+            (widget.text.toPlainText() == 'Interactive-Book' ||
+                widget.text.toPlainText() ==
+                    'Learn Digital Logic Design easily.' ||
+                widget.text.toPlainText() == 'Audience');
+      }), findsNWidgets(3));
       expect(find.byType(Divider), findsNWidgets(1));
     });
   });