Add HTML render

lib/components/html_message.dart

@@ -0,0 +1,41 @@
+import 'package:famedlysdk/famedlysdk.dart';
+import 'package:flutter_matrix_html/flutter_html.dart';
+import 'package:flutter/material.dart';
+import 'package:url_launcher/url_launcher.dart';
+
+import 'matrix.dart';
+
+class HtmlMessage extends StatelessWidget {
+  final String html;
+  final Color textColor;
+  final int maxLines;
+
+  const HtmlMessage({this.html, this.textColor, this.maxLines});
+
+  @override
+  Widget build(BuildContext context) {
+    // there is no need to pre-validate the html, as we validate it while rendering
+    
+    return Html(
+      data: html,
+      defaultTextStyle: TextStyle(color: textColor),
+      shrinkToFit: true,
+      maxLines: maxLines,
+      onLinkTap: (String url) {
+        if (url == null || url.isEmpty) {
+          return;
+        }
+        launch(url);
+      },
+      getMxcUrl: (String mxc, double width, double height) {
+        final ratio = MediaQuery.of(context).devicePixelRatio;
+        return Uri.parse(mxc)?.getThumbnail(
+          Matrix.of(context).client,
+          width: (width ?? 800) * ratio,
+          height: (height ?? 800) * ratio,
+          method: ThumbnailMethod.scale,
+        );
+      },
+    );
+  }
+}

lib/components/matrix.dart

@@ -55,6 +55,7 @@ class MatrixState extends State<Matrix> {
 
   String activeRoomId;
   File wallpaper;
+  bool renderHtml = false;
 
   String jitsiInstance = 'https://meet.jit.si/';
 
@@ -189,6 +190,9 @@ class MatrixState extends State<Matrix> {
           wallpaper = file;
         }
       });
+      client.storeAPI.getItem("chat.fluffy.renderHtml").then((final render) async {
+        renderHtml = render == "1";
+      });
     }
     super.initState();
   }

lib/components/message_content.dart

@@ -8,6 +8,7 @@ import 'package:link_text/link_text.dart';
 import 'package:url_launcher/url_launcher.dart';
 import 'matrix.dart';
 import 'message_download_content.dart';
+import 'html_message.dart';
 
 class MessageContent extends StatelessWidget {
   final Event event;
@@ -36,13 +37,30 @@ class MessageContent extends StatelessWidget {
           case MessageTypes.Video:
           case MessageTypes.File:
             return MessageDownloadContent(event, textColor);
-          case MessageTypes.BadEncrypted:
           case MessageTypes.Text:
+          case MessageTypes.Notice:
+          case MessageTypes.Emote:
+            if (
+              Matrix.of(context).renderHtml && !event.redacted &&
+              event.content['format'] == 'org.matrix.custom.html' &&
+              event.content['formatted_body'] is String
+            ) {
+              String html = event.content['formatted_body'];
+              if (event.messageType == MessageTypes.Emote) {
+                html = "* $html";
+              }
+              return HtmlMessage(
+                html: html,
+                textColor: textColor,
+              );
+            }
+            // else we fall through to the normal message rendering
+            continue textmessage;
+          case MessageTypes.BadEncrypted:
           case MessageTypes.Reply:
           case MessageTypes.Location:
           case MessageTypes.None:
-          case MessageTypes.Notice:
-          case MessageTypes.Emote:
+          textmessage:
           default:
             if (event.content['msgtype'] == Matrix.callNamespace) {
               return RaisedButton(
@@ -76,5 +94,6 @@ class MessageContent extends StatelessWidget {
           ),
         );
     }
+    return Container(); // else flutter analyze complains
   }
 }

lib/components/reply_content.dart

@@ -2,6 +2,9 @@ import 'package:famedlysdk/famedlysdk.dart';
 import 'package:fluffychat/l10n/l10n.dart';
 import 'package:flutter/material.dart';
 
+import 'html_message.dart';
+import 'matrix.dart';
+
 class ReplyContent extends StatelessWidget {
   final Event replyEvent;
   final bool lightText;
@@ -11,6 +14,40 @@ class ReplyContent extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    Widget replyBody;
+    if (
+      replyEvent != null && Matrix.of(context).renderHtml &&
+      [EventTypes.Message, EventTypes.Encrypted].contains(replyEvent.type) &&
+      [MessageTypes.Text, MessageTypes.Notice, MessageTypes.Emote].contains(replyEvent.messageType) &&
+      !replyEvent.redacted && replyEvent.content['format'] == 'org.matrix.custom.html' && replyEvent.content['formatted_body'] is String
+    ) {
+      String html = replyEvent.content['formatted_body'];
+      if (replyEvent.messageType == MessageTypes.Emote) {
+        html = "* $html";
+      }
+      replyBody = HtmlMessage(
+        html: html,
+        textColor: lightText
+            ? Colors.white
+            : Theme.of(context).textTheme.bodyText2.color,
+        maxLines: 1,
+      );
+    } else {
+      replyBody = Text(
+        replyEvent?.getLocalizedBody(
+              L10n.of(context),
+              withSenderNamePrefix: false,
+              hideReply: true,
+            ) ??
+            "",
+        overflow: TextOverflow.ellipsis,
+        maxLines: 1,
+        style: TextStyle(
+            color: lightText
+                ? Colors.white
+                : Theme.of(context).textTheme.bodyText2.color),
+      );
+    }
     return Row(
       children: <Widget>[
         Container(
@@ -34,20 +71,7 @@ class ReplyContent extends StatelessWidget {
                       lightText ? Colors.white : Theme.of(context).primaryColor,
                 ),
               ),
-              Text(
-                replyEvent?.getLocalizedBody(
-                      L10n.of(context),
-                      withSenderNamePrefix: false,
-                      hideReply: true,
-                    ) ??
-                    "",
-                overflow: TextOverflow.ellipsis,
-                maxLines: 1,
-                style: TextStyle(
-                    color: lightText
-                        ? Colors.white
-                        : Theme.of(context).textTheme.bodyText2.color),
-              ),
+              replyBody,
             ],
           ),
         ),