using URL-safe content-IDs when linking images

Author: robert-virkus

lib/src/dom/image_transformers.dart

@@ -18,10 +18,7 @@ class ImageTransformer implements DomTransformer {
       if (src != null) {
         if (src.startsWith('cid:')) {
           var cid = src.substring('cid:'.length);
-          if ((cid.startsWith('%3C') && cid.endsWith('%3E')) ||
-              (cid.startsWith('%3c') && cid.endsWith('%3e'))) {
-            cid = '<${cid.substring('%3C'.length, cid.length - '%3E'.length)}>';
-          } else if (!cid.startsWith('<')) {
+          if (!cid.startsWith('<')) {
             cid = '<$cid>';
           }
           final part = message.getPartWithContentId(cid);
@@ -32,7 +29,9 @@ class ImageTransformer implements DomTransformer {
                 toImageData(part, contentType.mediaType, configuration);
             imageElement.attributes['src'] = data;
             if (imageElement.parent?.localName != 'a') {
-              var anchor = Element.html('<a href="cid://$cid"></a>');
+              final linkCid =
+                  Uri.encodeComponent(cid.substring(1, cid.length - 1));
+              var anchor = Element.html('<a href="cid://$linkCid"></a>');
               anchor.append(Element.html(imageElement.outerHtml));
               imageElement.replaceWith(anchor);
             }

lib/src/text/merge_image_text_transformer.dart

@@ -13,17 +13,20 @@ class MergeAttachedImageTextTransformer extends TextTransformer {
     final search = TextSearchIterator('[cid:', text, endSearchPattern: ']');
     String? nextImageDefinition;
     while ((nextImageDefinition = search.next()) != null) {
-      final cid = nextImageDefinition!.substring(
-          '[cid:'.length, nextImageDefinition.length - 2);
+      var cid = nextImageDefinition!
+          .substring('[cid:'.length, nextImageDefinition.length - 2);
+      if (!cid.startsWith('<')) {
+        cid = '<$cid>';
+      }
       final part = message.getPartWithContentId(cid);
       if (part != null) {
         final contentType = part.getHeaderContentType();
         final mediaType = contentType?.mediaType;
         final data =
             ImageTransformer.toImageData(part, mediaType, configuration);
-
+        final linkCid = Uri.encodeComponent(cid.substring(1, cid.length - 1));
         text = text.replaceFirst(nextImageDefinition,
-            '<img src="$data" alt="${part.getHeaderContentDisposition()?.filename}"/>');
+            '<a href="cid://$linkCid"><img src="$data" alt="${part.getHeaderContentDisposition()?.filename}"/></a>');
       }
     }
     return text;