Fix template preview on web

lib/ui/settings/templates_and_reminders.dart

@@ -16,6 +16,8 @@ import 'package:invoiceninja_flutter/utils/formatting.dart';
 import 'package:invoiceninja_flutter/utils/localization.dart';
 import 'package:invoiceninja_flutter/utils/templates.dart';
 import 'package:webview_flutter/webview_flutter.dart';
+import 'package:invoiceninja_flutter/utils/web_stub.dart'
+    if (dart.library.html) 'package:invoiceninja_flutter/utils/web.dart';
 
 class TemplatesAndReminders extends StatefulWidget {
   const TemplatesAndReminders({
@@ -508,12 +510,19 @@ class _TemplatePreviewState extends State<TemplatePreview>
   @override
   bool get wantKeepAlive => true;
 
+  @override
+  void initState() {
+    super.initState();
+  }
+
   @override
   void didUpdateWidget(oldWidget) {
     super.didUpdateWidget(oldWidget);
 
-    if (widget.html != oldWidget.html) {
-      _webViewController.loadUrl(widget.html);
+    if (!kIsWeb) {
+      if (widget.html != oldWidget.html) {
+        _webViewController.loadUrl(widget.html);
+      }
     }
   }
 
@@ -521,14 +530,24 @@ class _TemplatePreviewState extends State<TemplatePreview>
   Widget build(BuildContext context) {
     super.build(context);
 
-    return WebView(
-      debuggingEnabled: true,
-      initialUrl: widget.html,
-      onWebViewCreated: (WebViewController webViewController) {
-        _webViewController = webViewController;
-      },
-      javascriptMode: JavascriptMode.disabled,
-    );
+    if (kIsWeb) {
+      registerWebView(widget.html);
+
+      return SizedBox(
+        width: 640,
+        height: 360,
+        child: HtmlElementView(viewType: 'preview-${widget.html}'),
+      );
+    } else {
+      return WebView(
+        debuggingEnabled: true,
+        initialUrl: widget.html,
+        onWebViewCreated: (WebViewController webViewController) {
+          _webViewController = webViewController;
+        },
+        javascriptMode: JavascriptMode.disabled,
+      );
+    }
   }
 }
 
@@ -547,30 +566,34 @@ class EmailPreview extends StatelessWidget {
   Widget build(BuildContext context) {
     return Container(
       color: Colors.white,
-      child: Column(
-        mainAxisSize: MainAxisSize.max,
-        crossAxisAlignment: CrossAxisAlignment.start,
+      child: Stack(
+        alignment: Alignment.topCenter,
         children: <Widget>[
-          Padding(
-            padding:
-                const EdgeInsets.only(left: 8, top: 12, bottom: 8, right: 8),
-            child: Text(
-              subject,
-              style: TextStyle(
-                color: Colors.black,
-                fontWeight: FontWeight.bold,
-                fontSize: 20,
-              ),
-            ),
-          ),
-          Expanded(
-            child: TemplatePreview(body),
-          ),
           if (isLoading)
             SizedBox(
-              height: 4.0,
               child: LinearProgressIndicator(),
-            )
+            ),
+          Column(
+            mainAxisSize: MainAxisSize.max,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: <Widget>[
+              Padding(
+                padding: const EdgeInsets.only(
+                    left: 8, top: 12, bottom: 8, right: 8),
+                child: Text(
+                  subject,
+                  style: TextStyle(
+                    color: Colors.black,
+                    fontWeight: FontWeight.bold,
+                    fontSize: 20,
+                  ),
+                ),
+              ),
+              Expanded(
+                child: TemplatePreview(body),
+              ),
+            ],
+          )
         ],
       ),
     );

lib/utils/templates.dart

@@ -42,7 +42,7 @@ void loadTemplate({
           }))
       .then((dynamic response) {
     subject = response['subject'] ?? '';
-    body = base64Encode(encoder.convert(response['body'] ?? ''));
+    body = 'data:text/html;base64,' + base64Encode(encoder.convert(response['body'] ?? ''));
     onComplete(subject, body);
   }).catchError((dynamic error) {
     showErrorDialog(context: context, message: '$error');

lib/utils/web.dart

@@ -1,5 +1,6 @@
 import 'dart:async';
 import 'dart:html';
+import 'dart:ui' as ui;
 
 Future<String> webFilePicker() {
   final completer = new Completer<String>();
@@ -27,3 +28,12 @@ void webDownload(String filename, String data) {
 }
 
 void webReload() => window.location.reload();
+
+void registerWebView(String html) {
+  // ignore: undefined_prefixed_name
+  ui.platformViewRegistry.registerViewFactory(
+      'preview-html',
+      (int viewId) => IFrameElement()
+        ..src = html
+        ..style.border = 'none');
+}

lib/utils/web_stub.dart

@@ -3,3 +3,5 @@ Future<String> webFilePicker() => null;
 void webDownload(String filename, String data) {}
 
 void webReload() {}
+
+void registerWebView(String html) {}