TF-105 Create html transformer

2021-10-06 09:55:22 +07:00
parent ee58a77758
commit 86cdbda60b
14 changed files with 433 additions and 0 deletions
@@ -0,0 +1,21 @@
+
+import 'package:core/presentation/utils/html_transformer/transform_configuration.dart';
+import 'package:html/dom.dart';
+
+/// Transforms the HTML DOM.
+abstract class DomTransformer {
+
+  const DomTransformer();
+
+  /// Uses the `DOM` [document] and specified [message] to transform the `document`.
+  ///
+  /// All changes will be visible to subsequent transformers.
+  void process(Document document, String message, TransformConfiguration configuration);
+
+  /// Adds a HEAD element if necessary
+  void ensureDocumentHeadIsAvailable(Document document) {
+    if (document.head == null) {
+      document.children.insert(0, Element.html('<head></head>'));
+    }
+  }
+}
@@ -0,0 +1,9 @@
+
+import 'package:core/presentation/utils/html_transformer/transform_configuration.dart';
+
+/// Transforms plain text messages.
+abstract class TextTransformer {
+  const TextTransformer();
+
+  String transform(String text, String message, TransformConfiguration configuration);
+}
@@ -0,0 +1,24 @@
+
+import 'package:core/presentation/utils/html_transformer/base/dom_transformer.dart';
+import 'package:core/presentation/utils/html_transformer/transform_configuration.dart';
+import 'package:html/dom.dart';
+
+class SetStyleBlockQuoteTransformer extends DomTransformer {
+
+  const SetStyleBlockQuoteTransformer();
+
+  @override
+  void process(Document document, String message, TransformConfiguration configuration) {
+    final quoteElements = document.getElementsByTagName('blockquote');
+    for (final quote in quoteElements) {
+      final style = quote.attributes['style'];
+      if (style == null) {
+        quote.attributes['style'] = '''
+          margin: 0px 8px 0px 8px;
+          padding: 8px 16px 8px 16px;
+          border-left:5px solid #eee;
+        ''';
+      }
+    }
+  }
+}
@@ -0,0 +1,34 @@
+
+import 'package:html/dom.dart';
+import 'package:core/presentation/utils/html_transformer/base/dom_transformer.dart';
+import 'package:core/presentation/utils/html_transformer/transform_configuration.dart';
+
+class ImageTransformer extends DomTransformer {
+
+  const ImageTransformer();
+
+  @override
+  void process(Document document, String message, TransformConfiguration configuration) {
+    final imageElements = document.getElementsByTagName('img');
+    for (final imageElement in imageElements) {
+      final src = imageElement.attributes['src'];
+      if (src != null) {
+        if (src.startsWith('http')) {
+          if (configuration.blockExternalImages) {
+            imageElement.attributes.remove('src');
+          } else if (src.startsWith('http:')) {
+            // always at least enforce HTTPS images:
+            final url = src.substring('http:'.length);
+            imageElement.attributes['src'] = 'https:$url';
+          }
+        }
+      }
+      final style = imageElement.attributes['style'];
+      if (style == null) {
+        imageElement.attributes['style'] = 'display: inline;max-width: 100%;height: auto;';
+      } else {
+        imageElement.attributes['style'] = 'display: inline;max-width: 100%;height: auto;' + style;
+      }
+    }
+  }
+}
@@ -0,0 +1,17 @@
+
+import 'package:core/presentation/utils/html_transformer/base/dom_transformer.dart';
+import 'package:core/presentation/utils/html_transformer/transform_configuration.dart';
+import 'package:html/dom.dart';
+
+class EnsureRelationNoReferrerTransformer extends DomTransformer {
+
+  const EnsureRelationNoReferrerTransformer();
+
+  @override
+  void process(Document document, String message, TransformConfiguration configuration) {
+    final linkElements = document.getElementsByTagName('a');
+    for (final linkElement in linkElements) {
+      linkElement.attributes['rel'] = 'noopener noreferrer';
+    }
+  }
+}
@@ -0,0 +1,43 @@
+
+import 'package:html/dom.dart';
+import 'package:core/presentation/utils/html_transformer/base/dom_transformer.dart';
+import 'package:core/presentation/utils/html_transformer/transform_configuration.dart';
+
+class ViewPortTransformer extends DomTransformer {
+
+  static final Element _viewPortMetaElement = Element.html(
+    '<meta name="viewport" content="width=device-width, initial-scale=1.0">');
+  static final Element _contentTypeMetaElement = Element.html(
+    '<meta http-equiv="Content-Type" content="text/html; charset=utf-8">');
+
+  const ViewPortTransformer();
+
+  @override
+  void process(Document document, String message, TransformConfiguration configuration) {
+    final metaElements = document.getElementsByTagName('meta');
+    var viewportNeedsToBeAdded = true;
+    var contentTypeNeedsToBeAdded = true;
+    for (final metaElement in metaElements) {
+      if (metaElement.attributes['name'] == 'viewport') {
+        viewportNeedsToBeAdded = false;
+        metaElement.attributes['content'] = 'width=device-width, initial-scale=1.0';
+      } else if (metaElement.attributes['charset'] != null) {
+        metaElement.attributes['charset'] = 'utf-8';
+      } else {
+        final httpEquiv = metaElement.attributes['http-equiv'];
+        if (httpEquiv != null && httpEquiv.toLowerCase() == 'content-type') {
+          contentTypeNeedsToBeAdded = false;
+          metaElement.attributes['content'] = 'text/html; charset=utf-8';
+        }
+      }
+    }
+    if (contentTypeNeedsToBeAdded) {
+      ensureDocumentHeadIsAvailable(document);
+      document.head!.append(_contentTypeMetaElement);
+    }
+    if (viewportNeedsToBeAdded) {
+      ensureDocumentHeadIsAvailable(document);
+      document.head!.append(_viewPortMetaElement);
+    }
+  }
+}
@@ -0,0 +1,17 @@
+
+import 'package:html/dom.dart';
+import 'package:core/presentation/utils/html_transformer/base/dom_transformer.dart';
+import 'package:core/presentation/utils/html_transformer/transform_configuration.dart';
+
+class RemoveScriptTransformer extends DomTransformer {
+
+  const RemoveScriptTransformer();
+
+  @override
+  void process(Document document, String message, TransformConfiguration configuration) {
+    final scriptElements = document.getElementsByTagName('script');
+    for (final scriptElement in scriptElements) {
+      scriptElement.remove();
+    }
+  }
+}
@@ -0,0 +1,36 @@
+
+import 'package:core/presentation/utils/html_transformer/base/dom_transformer.dart';
+import 'package:core/presentation/utils/html_transformer/transform_configuration.dart';
+import 'package:html/dom.dart';
+
+class SetStyleTableTransformer extends DomTransformer {
+
+  const SetStyleTableTransformer();
+
+  @override
+  void process(Document document, String message, TransformConfiguration configuration) {
+    final tableElements = document.getElementsByTagName('table');
+    for (final table in tableElements) {
+      final style = table.attributes['style'];
+      if (style == null) {
+        table.attributes['style'] = 'width: 100%;max-width: 100%;border:1px solid #f0f0f0;border-collapse: collapse;border-spacing: 2px;';
+      }
+    }
+
+    final tdElements = document.getElementsByTagName('td');
+    for (final tdTag in tdElements) {
+      final style = tdTag.attributes['style'];
+      if (style == null) {
+        tdTag.attributes['style'] = 'padding: 13px;margin: 0px;border:1px solid #f0f0f0;';
+      }
+    }
+
+    final thElements = document.getElementsByTagName('th');
+    for (final thTag in thElements) {
+      final style = thTag.attributes['style'];
+      if (style == null) {
+        thTag.attributes['style'] = 'padding: 13px;margin: 0px;border:1px solid #f0f0f0;';
+      }
+    }
+  }
+}
@@ -0,0 +1,42 @@
+import 'package:core/presentation/utils/html_transformer/message_content_transformer.dart';
+import 'package:core/presentation/utils/html_transformer/transform_configuration.dart';
+import 'package:html/dom.dart';
+
+class HtmlTransform {
+
+  final String _message;
+
+  HtmlTransform(this._message);
+
+  /// Transforms this message to HTML code.
+  ///
+  /// Set [blockExternalImages] to `true` in case external images should be blocked.
+  /// Optionally specify the [transformConfiguration] to control all aspects of the transformation - in that case other parameters are ignored.
+  String transformToHtml({
+    bool? blockExternalImages,
+    TransformConfiguration? transformConfiguration,
+  }) {
+    final document = transformToDocument(
+      blockExternalImages: blockExternalImages,
+      transformConfiguration: transformConfiguration,
+    );
+    return document.outerHtml;
+  }
+
+  /// Transforms this message to Document.
+  ///
+  /// Set [blockExternalImages] to `true` in case external images should be blocked.
+  /// Optionally specify the [transformConfiguration] to control all aspects of the transformation - in that case other parameters are ignored.
+  Document transformToDocument({
+    bool? blockExternalImages,
+    int? maxImageWidth,
+    TransformConfiguration? transformConfiguration,
+  }) {
+    transformConfiguration ??= TransformConfiguration.create(
+      blockExternalImages: blockExternalImages,
+      maxImageWidth: maxImageWidth,
+    );
+    final transformer = MessageContentTransformer(transformConfiguration);
+    return transformer.toDocument(_message);
+  }
+}
@@ -0,0 +1,28 @@
+import 'package:core/presentation/utils/html_transformer/transform_configuration.dart';
+import 'package:html/dom.dart';
+import 'package:html/parser.dart' show parse;
+
+/// Transforms messages
+class MessageContentTransformer {
+  /// The configuration used for the transformation
+  final TransformConfiguration configuration;
+
+  MessageContentTransformer(this.configuration);
+
+  void transformDocument(Document document, String message) {
+    for (final domTransformer in configuration.domTransformers) {
+      domTransformer.process(document, message, configuration);
+    }
+  }
+
+  Document toDocument(String message) {
+    var html = message;
+    final document = parse(html);
+    transformDocument(document, message);
+    return document;
+  }
+
+  String toHtml(String message) {
+    return toDocument(message).outerHtml;
+  }
+}
@@ -0,0 +1,13 @@
+
+import 'package:core/presentation/utils/html_transformer/base/text_transformer.dart';
+import 'package:core/presentation/utils/html_transformer/transform_configuration.dart';
+
+class ConvertTagsTextTransformer implements TextTransformer {
+
+  const ConvertTagsTextTransformer();
+
+  @override
+  String transform(String text, String message, TransformConfiguration configuration) {
+    return text.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
+  }
+}
@@ -0,0 +1,15 @@
+
+import 'package:core/presentation/utils/html_transformer/base/text_transformer.dart';
+import 'package:core/presentation/utils/html_transformer/transform_configuration.dart';
+
+class LineBreakTextTransformer extends TextTransformer {
+
+  const LineBreakTextTransformer();
+
+  @override
+  String transform(String text, String message, TransformConfiguration configuration) {
+    text = text.replaceAll('\r\n', '<br/>');
+    text = text.replaceAll('\n', '<br/>');
+    return text;
+  }
+}
@@ -0,0 +1,47 @@
+
+import 'package:core/presentation/utils/html_transformer/base/text_transformer.dart';
+import 'package:core/presentation/utils/html_transformer/transform_configuration.dart';
+
+class LinksTextTransformer extends TextTransformer {
+
+  static final RegExp schemeRegEx = RegExp(r'[a-z]{3,6}://');
+  // Not a perfect but good enough regular expression to match URLs in text.
+  // It also matches a space at the beginning and a dot at the end,
+  // so this is filtered out manually in the found matches
+  static final RegExp linkRegEx = RegExp(
+    r'(([a-z]{3,6}:\/\/)|(^|\s))([a-zA-Z0-9\-]+\.)+[a-z]{2,13}([\?\/]+[\.\?\=\&\%\/\w\+\-]*)?');
+  const LinksTextTransformer();
+
+  @override
+  String transform(String text, String message, TransformConfiguration configuration) {
+    final matches = linkRegEx.allMatches(text);
+    if (matches.isEmpty) {
+      return text;
+    }
+    final buffer = StringBuffer();
+    var end = 0;
+    for (final match in matches) {
+      if (match.end < text.length && text[match.end] == '@') {
+        // this is an email address, abort abort!
+        continue;
+      }
+      final originalGroup = match.group(0)!;
+      final group = originalGroup.trimLeft();
+      final start = match.start + originalGroup.length - group.length;
+      buffer.write(text.substring(end, start));
+      final endsWithDot = group.endsWith('.');
+      final urlText =
+          endsWithDot ? group.substring(0, group.length - 1) : group;
+      buffer.write('<a href="');
+      if (!group.startsWith(schemeRegEx)) {
+        buffer.write('https://');
+      }
+      buffer..write(urlText)..write('">')..write(urlText)..write('</a>');
+      end = endsWithDot ? match.end - 1 : match.end;
+    }
+    if (end < text.length) {
+      buffer.write(text.substring(end));
+    }
+    return buffer.toString();
+  }
+}
@@ -0,0 +1,87 @@
+
+import 'package:core/presentation/utils/html_transformer/dom/blockquote_transformers.dart';
+import 'package:core/presentation/utils/html_transformer/dom/image_transformers.dart';
+import 'package:core/presentation/utils/html_transformer/dom/link_transformers.dart';
+import 'package:core/presentation/utils/html_transformer/dom/meta_transformers.dart';
+import 'package:core/presentation/utils/html_transformer/dom/script_transformers.dart';
+import 'package:core/presentation/utils/html_transformer/base/dom_transformer.dart';
+import 'package:core/presentation/utils/html_transformer/dom/table_transformers.dart';
+import 'package:core/presentation/utils/html_transformer/text/convert_tags_text_transformer.dart';
+import 'package:core/presentation/utils/html_transformer/text/linebreak_text_transformer.dart';
+import 'package:core/presentation/utils/html_transformer/text/links_text_transformer.dart';
+import 'package:core/presentation/utils/html_transformer/base/text_transformer.dart';
+
+/// Contains the configuration for all transformations.
+class TransformConfiguration {
+
+  /// Should external images be blocked?
+  final bool blockExternalImages;
+
+  /// The maximum width for embedded images. It make sense to limit this to reduce the generated HTML size.
+  final int? maxImageWidth;
+
+  /// The list of DOM transformers being used
+  final List<DomTransformer> domTransformers;
+
+  /// The list of text transformers that are used before a plain text message without HTML part is converted into HTML
+  final List<TextTransformer> textTransformers;
+
+  /// Creates a new transform configuration
+  ///
+  /// Compare [create] to have an easier to use building function
+  const TransformConfiguration(
+    this.blockExternalImages,
+    this.maxImageWidth,
+    this.domTransformers,
+    this.textTransformers
+  );
+
+  /// Provides easy access to a standard configuration that does not block external images.
+  static const TransformConfiguration standardConfiguration = TransformConfiguration(
+    false,
+    standardMaxImageWidth,
+    standardDomTransformers,
+    standardTextTransformers
+  );
+
+  /// Provides an easy option to customize a configuration.
+  ///
+  /// Any specified [customDomTransformers] or [customTextTransformers] are being appended to the standard transformers.
+  static TransformConfiguration create({
+    bool? blockExternalImages,
+    int? maxImageWidth,
+    List<DomTransformer>? customDomTransformers,
+    List<TextTransformer>? customTextTransformers
+  }) {
+    final domTransformers = (customDomTransformers != null)
+        ? [...standardDomTransformers, ...customDomTransformers]
+        : [...standardDomTransformers];
+    final textTransformers = (customTextTransformers != null)
+        ? [...standardTextTransformers, ...customTextTransformers]
+        : standardTextTransformers;
+    maxImageWidth ??= standardMaxImageWidth;
+    return TransformConfiguration(
+      blockExternalImages ?? false,
+      maxImageWidth,
+      domTransformers,
+      textTransformers
+    );
+  }
+
+  static const int? standardMaxImageWidth = null;
+
+  static const List<DomTransformer> standardDomTransformers = [
+    ViewPortTransformer(),
+    RemoveScriptTransformer(),
+    ImageTransformer(),
+    EnsureRelationNoReferrerTransformer(),
+    SetStyleBlockQuoteTransformer(),
+    SetStyleTableTransformer(),
+  ];
+
+  static const List<TextTransformer> standardTextTransformers = [
+    ConvertTagsTextTransformer(),
+    LinksTextTransformer(),
+    LineBreakTextTransformer(),
+  ];
+}