TF-3622 Fix deformed inlined image

Signed-off-by: dab246 <tdvu@linagora.com>

core/lib/presentation/utils/html_transformer/dom/image_transformers.dart

@@ -27,24 +27,11 @@ class ImageTransformer extends DomTransformer {
       if (imageElements.isEmpty) return;
 
       await Future.wait(imageElements.map((imageElement) async {
-        var exStyle = imageElement.attributes['style'];
-        if (exStyle != null) {
-          if (!exStyle.trim().endsWith(';')) {
-            exStyle = '$exStyle;';
-          }
-          if (!exStyle.contains('display')) {
-            exStyle = '$exStyle display:inline;';
-          }
-          if (!exStyle.contains('max-width')) {
-            exStyle = '$exStyle max-width:100%;';
-          }
-          imageElement.attributes['style'] = exStyle;
-        } else {
-          imageElement.attributes['style'] = 'display:inline;max-width:100%;';
-        }
         final src = imageElement.attributes['src'];
 
         if (src == null) return;
+
+        final id = imageElement.attributes['id'] ?? '';
         final mimeType = imageElement.attributes['data-mimetype'];
         if (src.startsWith('cid:') && mapUrlDownloadCID != null) {
           final imageBase64 = await _convertCidToBase64Image(
@@ -54,7 +41,10 @@ class ImageTransformer extends DomTransformer {
             mimeType: mimeType,
           );
           imageElement.attributes['src'] = imageBase64 ?? src;
-          imageElement.attributes['id'] ??= src;
+
+          if (!id.startsWith('cid:')) {
+            imageElement.attributes['id'] = src;
+          }
         } else if (src.startsWith('https://') || src.startsWith('http://')) {
           if (!imageElement.attributes.containsKey('loading')) {
             imageElement.attributes['loading'] = 'lazy';

core/lib/presentation/views/html_viewer/html_content_viewer_on_web_widget.dart

@@ -267,7 +267,10 @@ class _HtmlContentViewerOnWebState extends State<HtmlContentViewerOnWeb> {
       minHeight: minHeight,
       minWidth: _minWidth,
       styleCSS: HtmlTemplate.tooltipLinkCss,
-      javaScripts: webViewActionScripts + scriptsDisableZoom + HtmlInteraction.scriptsHandleLazyLoadingBackgroundImage,
+      javaScripts: webViewActionScripts
+          + scriptsDisableZoom
+          + HtmlInteraction.scriptsHandleLazyLoadingBackgroundImage
+          + HtmlInteraction.generateNormalizeImageScript(widget.widthContent),
       direction: widget.direction,
       contentPadding: widget.contentPadding,
       useDefaultFont: widget.useDefaultFont,

core/lib/presentation/views/html_viewer/html_content_viewer_widget.dart

@@ -68,7 +68,7 @@ class _HtmlContentViewState extends State<HtmlContentViewer> {
   late InAppWebViewController _webViewController;
   late double _actualHeight;
   late Set<Factory<OneSequenceGestureRecognizer>> _gestureRecognizers;
-  late String _customScripts;
+  late StringBuffer _customScriptsBuilder;
 
   final _loadingBarNotifier = ValueNotifier(true);
 
@@ -92,10 +92,13 @@ class _HtmlContentViewState extends State<HtmlContentViewer> {
         Factory<LongPressGestureRecognizer>(() => LongPressGestureRecognizer(duration: _longPressGestureDurationIOS)),
       };
     }
+    _customScriptsBuilder = StringBuffer();
+    _customScriptsBuilder.write(HtmlInteraction.scriptsHandleLazyLoadingBackgroundImage);
+    if (widget.initialWidth != null) {
+      _customScriptsBuilder.write(HtmlInteraction.generateNormalizeImageScript(widget.initialWidth!));
+    }
     if (PlatformInfo.isAndroid) {
-      _customScripts = HtmlInteraction.scriptsHandleLazyLoadingBackgroundImage + HtmlInteraction.scriptsHandleContentSizeChanged;
-    } else {
-      _customScripts = HtmlInteraction.scriptsHandleLazyLoadingBackgroundImage;
+      _customScriptsBuilder.write(HtmlInteraction.scriptsHandleContentSizeChanged);
     }
     _initialData();
   }
@@ -115,7 +118,7 @@ class _HtmlContentViewState extends State<HtmlContentViewer> {
     _htmlData = HtmlUtils.generateHtmlDocument(
       content: widget.contentHtml,
       direction: widget.direction,
-      javaScripts: _customScripts,
+      javaScripts: _customScriptsBuilder.toString(),
       contentPadding: widget.contentPadding,
       useDefaultFont: widget.useDefaultFont,
     );