TF-4152 Fix tooltip stay out of screen in Email View

core/lib/core.dart

@@ -111,6 +111,7 @@ export 'presentation/views/semantics/checkbox_semantics.dart';
 export 'presentation/views/semantics/text_field_semantics.dart';
 export 'presentation/views/semantics/icon_semantics.dart';
 export 'presentation/views/shortcut/key_shortcut.dart';
+export 'presentation/views/tooltip/iframe_tooltip_overlay.dart';
 
 // Resources
 export 'presentation/resources/assets_paths.dart';

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

@@ -1,41 +0,0 @@
-
-import 'package:core/data/network/dio_client.dart';
-import 'package:core/presentation/utils/html_transformer/base/dom_transformer.dart';
-import 'package:core/utils/app_logger.dart';
-import 'package:core/utils/html/html_template.dart';
-import 'package:html/dom.dart';
-
-class RemoveTooltipLinkTransformer extends DomTransformer {
-
-  const RemoveTooltipLinkTransformer();
-
-  @override
-  Future<void> process({
-    required Document document,
-    required DioClient dioClient,
-    Map<String, String>? mapUrlDownloadCID,
-  }) async {
-    try {
-      final linkElements = document.querySelectorAll('a.${HtmlTemplate.nameClassToolTip}');
-
-      if (linkElements.isEmpty) return;
-
-      await Future.wait(linkElements.map((linkElement) async {
-        final classAttribute = linkElement.attributes['class'];
-        if (classAttribute != null) {
-          final newClassAttribute = classAttribute.replaceFirst(HtmlTemplate.nameClassToolTip, '');
-          linkElement.attributes['class'] = newClassAttribute;
-        }
-        final listSpanTag = linkElement.querySelectorAll('span.tooltiptext');
-        if (listSpanTag.isNotEmpty) {
-          for (var element in listSpanTag) {
-            element.remove();
-          }
-        }
-      }));
-    } catch (e) {
-      logError('$runtimeType::process:Exception = $e');
-    }
-  }
-
-}

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

@@ -2,14 +2,12 @@ import 'package:core/data/network/dio_client.dart';
 import 'package:core/presentation/utils/html_transformer/base/dom_transformer.dart';
 import 'package:core/presentation/utils/html_transformer/sanitize_url.dart';
 import 'package:core/utils/app_logger.dart';
-import 'package:core/utils/html/html_template.dart';
 import 'package:html/dom.dart';
 
 class SanitizeHyperLinkTagInHtmlTransformer extends DomTransformer {
   final _sanitizeUrl = SanitizeUrl();
-  final bool useTooltip;
 
-  SanitizeHyperLinkTagInHtmlTransformer({this.useTooltip = false});
+  SanitizeHyperLinkTagInHtmlTransformer();
 
   @override
   Future<void> process({
@@ -24,9 +22,6 @@ class SanitizeHyperLinkTagInHtmlTransformer extends DomTransformer {
 
       await Future.wait(elements.map((element) async {
         _sanitizeUrlResource(element);
-        if (useTooltip) {
-          _addToolTipWhenHoverLink(element);
-        }
         _addBlankForTargetProperty(element);
         _addNoReferrerForRelProperty(element);
       }));
@@ -46,22 +41,6 @@ class SanitizeHyperLinkTagInHtmlTransformer extends DomTransformer {
     element.attributes['href'] = urlSanitized;
   }
 
-  void _addToolTipWhenHoverLink(Element element) {
-    final url = element.attributes['href'] ?? '';
-    final text = element.text;
-    final children = element.children;
-    if (children.isEmpty && text.isNotEmpty) {
-      final innerHtml = element.innerHtml;
-      final tagClass = element.attributes['class'];
-      if (tagClass != null) {
-        element.attributes['class'] = '$tagClass ${HtmlTemplate.nameClassToolTip}';
-      } else {
-        element.attributes['class'] = HtmlTemplate.nameClassToolTip;
-      }
-      element.innerHtml = '$innerHtml <span class="tooltiptext">$url</span>';
-    }
-  }
-
   void _addBlankForTargetProperty(Element element) {
     element.attributes['target'] = '_blank';
   }

core/lib/presentation/utils/html_transformer/transform_configuration.dart

@@ -12,7 +12,6 @@ import 'package:core/presentation/utils/html_transformer/dom/remove_lazy_loading
 import 'package:core/presentation/utils/html_transformer/dom/remove_lazy_loading_image_transformers.dart';
 import 'package:core/presentation/utils/html_transformer/dom/remove_max_width_in_image_style_transformers.dart';
 import 'package:core/presentation/utils/html_transformer/dom/remove_style_tag_outside_transformers.dart';
-import 'package:core/presentation/utils/html_transformer/dom/remove_tooltip_link_transformers.dart';
 import 'package:core/presentation/utils/html_transformer/dom/sanitize_hyper_link_tag_in_html_transformers.dart';
 import 'package:core/presentation/utils/html_transformer/dom/script_transformers.dart';
 import 'package:core/presentation/utils/html_transformer/dom/signature_transformers.dart';
@@ -43,8 +42,6 @@ class TransformConfiguration {
   ) => TransformConfiguration([], textTransformers);
 
   factory TransformConfiguration.forReplyForwardEmail() => TransformConfiguration.fromDomTransformers([
-    if (PlatformInfo.isWeb)
-      const RemoveTooltipLinkTransformer(),
     const SignatureTransformer(),
     const RemoveCollapsedSignatureButtonTransformer(),
     const NormalizeLineHeightInStyleTransformer(),
@@ -74,7 +71,7 @@ class TransformConfiguration {
       const RemoveScriptTransformer(),
       const BlockQuotedTransformer(),
       const BlockCodeTransformer(),
-      SanitizeHyperLinkTagInHtmlTransformer(useTooltip: true),
+      SanitizeHyperLinkTagInHtmlTransformer(),
       const ImageTransformer(),
       const AddLazyLoadingForBackgroundImageTransformer(),
       const RemoveCollapsedSignatureButtonTransformer(),
@@ -89,8 +86,6 @@ class TransformConfiguration {
   );
 
   factory TransformConfiguration.forPrintEmail() => TransformConfiguration.fromDomTransformers([
-    if (PlatformInfo.isWeb)
-      const RemoveTooltipLinkTransformer(),
     const RemoveLazyLoadingForBackgroundImageTransformer(),
     const RemoveLazyLoadingImageTransformer(),
     const RemoveCollapsedSignatureButtonTransformer(),
@@ -103,7 +98,7 @@ class TransformConfiguration {
        const RemoveScriptTransformer(),
        const BlockQuotedTransformer(),
        const BlockCodeTransformer(),
-       SanitizeHyperLinkTagInHtmlTransformer(useTooltip: PlatformInfo.isWeb),
+       SanitizeHyperLinkTagInHtmlTransformer(),
        const ImageTransformer(),
      ],
    );
@@ -139,7 +134,7 @@ class TransformConfiguration {
     const RemoveScriptTransformer(),
     const BlockQuotedTransformer(),
     const BlockCodeTransformer(),
-    SanitizeHyperLinkTagInHtmlTransformer(useTooltip: PlatformInfo.isWeb),
+    SanitizeHyperLinkTagInHtmlTransformer(),
     const ImageTransformer(),
     const AddLazyLoadingForBackgroundImageTransformer(),
     const RemoveCollapsedSignatureButtonTransformer(),

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

@@ -5,6 +5,7 @@ import 'dart:math' as math;
 import 'package:core/presentation/constants/constants_ui.dart';
 import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/views/shortcut/key_shortcut.dart';
+import 'package:core/presentation/views/tooltip/iframe_tooltip_overlay.dart';
 import 'package:core/utils/app_logger.dart';
 import 'package:core/utils/html/html_interaction.dart';
 import 'package:core/utils/html/html_template.dart';
@@ -51,6 +52,7 @@ class HtmlContentViewerOnWeb extends StatefulWidget {
   final double? viewMaxHeight;
   final bool autoAdjustHeight;
   final bool useLinkTooltipOverlay;
+  final IframeTooltipOptions? iframeTooltipOptions;
 
   const HtmlContentViewerOnWeb({
     Key? key,
@@ -77,6 +79,7 @@ class HtmlContentViewerOnWeb extends StatefulWidget {
     this.viewMaxHeight,
     this.onIFrameKeyboardShortcutAction,
     this.onIFrameClickAction,
+    this.iframeTooltipOptions,
   }) : super(key: key);
 
   @override
@@ -103,12 +106,19 @@ class _HtmlContentViewerOnWebState extends State<HtmlContentViewerOnWeb>
   static const String onScrollChangedEvent = 'onScrollChanged';
   static const String onScrollEndEvent = 'onScrollEnd';
 
+  IframeTooltipOverlay? _tooltipOverlay;
+
   @override
   void initState() {
     super.initState();
     _actualHeight = widget.heightContent;
     _actualWidth = widget.widthContent;
     minHeight = widget.htmlContentMinHeight;
+    if (PlatformInfo.isWebDesktop) {
+      _tooltipOverlay = IframeTooltipOverlay(
+        options: widget.iframeTooltipOptions ?? const IframeTooltipOptions(),
+      );
+    }
     _setUpWeb();
     _onMessageSubscription = html.window.onMessage.listen(_handleMessageEvent);
   }
@@ -133,6 +143,12 @@ class _HtmlContentViewerOnWebState extends State<HtmlContentViewerOnWeb>
       } else if (_isIframeClickEventTriggered(type)) {
         _handleOnIFrameClickEvent(data);
         return;
+      } else if (_isIframeLinkHoverEventTriggered(type)) {
+        _handleOnIFrameLinkHoverEvent(data);
+        return;
+      } else if (_isIframeLinkOutEventTriggered(type)) {
+        _handleOnIFrameLinkOutEvent(data);
+        return;
       }
 
       if (data['message'] == iframeOnLoadMessage) {
@@ -311,6 +327,46 @@ class _HtmlContentViewerOnWebState extends State<HtmlContentViewerOnWeb>
     }
   }
 
+  bool _isIframeLinkHoverEventTriggered(String? type) {
+    return type?.contains('toDart: iframeLinkHover') == true;
+  }
+
+  bool _isIframeLinkOutEventTriggered(String? type) {
+    return type?.contains('toDart: iframeLinkOut') == true;
+  }
+
+  void _handleOnIFrameLinkHoverEvent(dynamic data) {
+    try {
+      log('$runtimeType::_handleOnIFrameLinkHoverEvent: $data');
+      final url = data['url'] ?? '';
+      final rectData = data['rect'];
+
+      if (rectData != null) {
+        final rect = Rect.fromLTWH(
+          rectData['x']?.toDouble() ?? 0,
+          rectData['y']?.toDouble() ?? 0,
+          rectData['width']?.toDouble() ?? 0,
+          rectData['height']?.toDouble() ?? 0,
+        );
+
+        if (mounted) {
+          _tooltipOverlay?.show(context, url, rect);
+        }
+      }
+    } catch (e) {
+      logError('$runtimeType::_handleOnIFrameLinkHoverEvent: Exception = $e');
+    }
+  }
+
+  void _handleOnIFrameLinkOutEvent(dynamic data) {
+    try {
+      log('$runtimeType::_handleOnIFrameLinkOutEvent: $data');
+      _tooltipOverlay?.hide();
+    } catch (e) {
+      logError('$runtimeType::_handleOnIFrameLinkOutEvent: Exception = $e');
+    }
+  }
+
   @override
   void didUpdateWidget(covariant HtmlContentViewerOnWeb oldWidget) {
     super.didUpdateWidget(oldWidget);
@@ -430,7 +486,6 @@ class _HtmlContentViewerOnWebState extends State<HtmlContentViewerOnWeb>
         : content;
 
     final combinedCss = [
-      HtmlTemplate.tooltipLinkCss,
       if (widget.enableQuoteToggle) HtmlUtils.quoteToggleStyle,
       if (widget.disableScrolling) HtmlTemplate.disableScrollingStyleCSS,
     ].join();
@@ -456,6 +511,8 @@ class _HtmlContentViewerOnWebState extends State<HtmlContentViewerOnWeb>
         HtmlInteraction.scriptHandleIframeKeyboardListener(_createdViewId),
       if (widget.useLinkTooltipOverlay)
         HtmlInteraction.scriptsHandleIframeClickListener(_createdViewId),
+      if (PlatformInfo.isWebDesktop)
+        HtmlInteraction.scriptsHandleIframeLinkHoverListener(_createdViewId),
     ].join();
 
     final htmlTemplate = HtmlUtils.generateHtmlDocument(
@@ -567,6 +624,10 @@ class _HtmlContentViewerOnWebState extends State<HtmlContentViewerOnWeb>
   void dispose() {
     _htmlData = null;
     _onMessageSubscription.cancel();
+    if (PlatformInfo.isWebDesktop) {
+      _tooltipOverlay?.hide();
+      _tooltipOverlay = null;
+    }
     super.dispose();
   }
 

core/lib/presentation/views/tooltip/iframe_tooltip_overlay.dart

@@ -0,0 +1,161 @@
+import 'package:flutter/material.dart';
+import 'package:pointer_interceptor/pointer_interceptor.dart';
+
+class IframeTooltipOptions {
+  final double tooltipBaseWidth;
+  final double tooltipHeight;
+  final double tooltipHorizontalMargin;
+  final double tooltipMarginTop;
+  final TextStyle? tooltipTextStyle;
+
+  const IframeTooltipOptions({
+    this.tooltipBaseWidth = 400,
+    this.tooltipHeight = 28,
+    this.tooltipHorizontalMargin = 12,
+    this.tooltipMarginTop = 4,
+    this.tooltipTextStyle,
+  });
+}
+
+class IframeTooltipOverlay {
+  OverlayEntry? _entry;
+
+  final IframeTooltipOptions options;
+
+  IframeTooltipOverlay({
+    this.options = const IframeTooltipOptions(),
+  });
+
+  void show(
+    BuildContext context,
+    String url,
+    Rect rect,
+  ) {
+    if (_entry != null) {
+      hide();
+      Future.microtask(() {
+        if (context.mounted) {
+          show(context, url, rect);
+        }
+      });
+      return;
+    }
+
+    final overlay = Overlay.maybeOf(context);
+    if (overlay == null) return;
+
+    Offset containerOffset = Offset.zero;
+    final renderObject = context.findRenderObject();
+    if (renderObject is RenderBox) {
+      containerOffset = renderObject.localToGlobal(Offset.zero);
+    }
+
+    final adjustedRect = rect.shift(containerOffset);
+
+    final viewportWidth = MediaQuery.sizeOf(context).width.toDouble();
+    final viewportHeight = MediaQuery.sizeOf(context).height.toDouble();
+
+    final tooltipWidth = viewportWidth < options.tooltipBaseWidth
+        ? viewportWidth - options.tooltipHorizontalMargin * 2
+        : options.tooltipBaseWidth;
+
+    final showAbove = (adjustedRect.bottom +
+            options.tooltipHeight +
+            options.tooltipMarginTop) >
+        viewportHeight;
+
+    final tooltipTop = showAbove
+        ? adjustedRect.top - options.tooltipHeight - options.tooltipMarginTop
+        : adjustedRect.bottom + options.tooltipMarginTop;
+
+    double tooltipLeft = adjustedRect.left;
+
+    if (tooltipLeft + tooltipWidth > viewportWidth) {
+      tooltipLeft =
+          viewportWidth - tooltipWidth - options.tooltipHorizontalMargin;
+    }
+
+    if (tooltipLeft < options.tooltipHorizontalMargin) {
+      tooltipLeft = options.tooltipHorizontalMargin;
+    }
+
+    _entry = OverlayEntry(
+      builder: (_) {
+        return TweenAnimationBuilder<double>(
+          tween: Tween(begin: 0, end: 1),
+          duration: const Duration(milliseconds: 130),
+          curve: Curves.easeOut,
+          builder: (context, opacity, child) {
+            final slide = (showAbove ? -1 : 1) * (1 - opacity) * 8;
+
+            return Opacity(
+              opacity: opacity,
+              child: Transform.translate(
+                offset: Offset(0, slide),
+                child: child,
+              ),
+            );
+          },
+          child: Stack(
+            children: [
+              Positioned.fill(
+                child: GestureDetector(
+                  behavior: HitTestBehavior.translucent,
+                  onTap: hide,
+                ),
+              ),
+              PositionedDirectional(
+                start: tooltipLeft,
+                top: tooltipTop,
+                child: PointerInterceptor(
+                  child: Material(
+                    borderRadius: const BorderRadius.all(Radius.circular(6)),
+                    child: Container(
+                      padding: const EdgeInsets.symmetric(
+                        horizontal: 8,
+                        vertical: 5,
+                      ),
+                      constraints: BoxConstraints(
+                        maxWidth: tooltipWidth,
+                        minHeight: options.tooltipHeight,
+                      ),
+                      decoration: BoxDecoration(
+                        color: Colors.black,
+                        borderRadius: const BorderRadius.all(
+                          Radius.circular(6),
+                        ),
+                        boxShadow: [
+                          BoxShadow(
+                            color: Colors.black.withValues(alpha: 0.15),
+                            blurRadius: 20,
+                          ),
+                        ],
+                      ),
+                      child: Text(
+                        url,
+                        style: options.tooltipTextStyle ??
+                            const TextStyle(
+                              color: Colors.white,
+                              fontSize: 13,
+                            ),
+                        maxLines: 1,
+                        overflow: TextOverflow.ellipsis,
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+            ],
+          ),
+        );
+      },
+    );
+
+    overlay.insert(_entry!);
+  }
+
+  void hide() {
+    _entry?.remove();
+    _entry = null;
+  }
+}

core/lib/utils/html/html_interaction.dart

@@ -419,4 +419,39 @@ class HtmlInteraction {
       });
     </script>
   ''';
+
+  static String scriptsHandleIframeLinkHoverListener(String viewId) => '''
+    <script type="text/javascript">
+      document.addEventListener("mouseover", function (e) {
+        const target = e.target;
+        if (target.tagName.toLowerCase() === "a") {
+          const rect = target.getBoundingClientRect();
+          
+          const payload = {
+            view: '$viewId',
+            type: 'toDart: iframeLinkHover',
+            url: target.href,
+            rect: {
+              x: rect.x,
+              y: rect.y,
+              width: rect.width,
+              height: rect.height
+            }
+          };
+          window.parent.postMessage(JSON.stringify(payload), "*");
+        }
+      });
+    
+      document.addEventListener("mouseout", function (e) {
+        const target = e.target;
+        if (target.tagName.toLowerCase() === "a") {
+          const payload = {
+            view: '$viewId',
+            type: 'toDart: iframeLinkOut'
+          };
+          window.parent.postMessage(JSON.stringify(payload), "*");
+        }
+      });
+    </script>
+  ''';
 }

core/lib/utils/html/html_template.dart

@@ -2,27 +2,6 @@
 import 'package:flutter/material.dart';
 
 class HtmlTemplate {
-  static const String nameClassToolTip = 'tmail-tooltip';
-  static const String tooltipLinkCss = '''
-    .$nameClassToolTip .tooltiptext {
-      visibility: hidden;
-      max-width: 400px;
-      background-color: black;
-      color: #fff;
-      text-align: center;
-      border-radius: 6px;
-      padding: 5px 8px 5px 8px;
-      white-space: nowrap; 
-      overflow: hidden;
-      text-overflow: ellipsis;
-      position: absolute;
-      z-index: 1;
-    }
-    .$nameClassToolTip:hover .tooltiptext {
-      visibility: visible;
-    }
-  ''';
-
   static const String printDocumentCssStyle = '''
     <style> 
       $fontFaceStyle 

lib/features/email/presentation/email_view.dart

@@ -1,7 +1,9 @@
 import 'package:core/presentation/constants/constants_ui.dart';
 import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/utils/theme_utils.dart';
 import 'package:core/presentation/views/html_viewer/html_content_viewer_on_web_widget.dart';
 import 'package:core/presentation/views/html_viewer/html_content_viewer_widget.dart';
+import 'package:core/presentation/views/tooltip/iframe_tooltip_overlay.dart';
 import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
@@ -367,6 +369,11 @@ class EmailView extends GetWidget<SingleEmailController> {
                     fontSize: isMobileResponsive ? 16 : 14,
                     onIFrameKeyboardShortcutAction: onIFrameKeyboardShortcutAction,
                     onIFrameClickAction: controller.handleOnIFrameClick,
+                    iframeTooltipOptions: IframeTooltipOptions(
+                      tooltipTextStyle: ThemeUtils.textStyleInter400.copyWith(
+                        color: Colors.white,
+                      ),
+                    ),
                   ),
                 );
               } else if (PlatformInfo.isIOS) {

lib/features/email/presentation/widgets/calendar_event/event_body_content_widget.dart

@@ -1,8 +1,10 @@
 import 'package:core/presentation/constants/constants_ui.dart';
 import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/theme_utils.dart';
 import 'package:core/presentation/views/html_viewer/html_content_viewer_on_web_widget.dart';
 import 'package:core/presentation/views/html_viewer/html_content_viewer_widget.dart';
+import 'package:core/presentation/views/tooltip/iframe_tooltip_overlay.dart';
 import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
@@ -58,6 +60,11 @@ class EventBodyContentWidget extends StatelessWidget {
                   direction: AppUtils.getCurrentDirection(context),
                   scrollController: scrollController,
                   onIFrameClickAction: onIFrameClickAction,
+                  iframeTooltipOptions: IframeTooltipOptions(
+                    tooltipTextStyle: ThemeUtils.textStyleInter400.copyWith(
+                      color: Colors.white,
+                    ),
+                  ),
                 );
               })
             )

lib/features/email_previewer/email_previewer_view.dart

@@ -1,6 +1,8 @@
 
+import 'package:core/presentation/utils/theme_utils.dart';
 import 'package:core/presentation/views/html_viewer/html_content_viewer_on_web_widget.dart';
 import 'package:core/presentation/views/loading/cupertino_loading_widget.dart';
+import 'package:core/presentation/views/tooltip/iframe_tooltip_overlay.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:tmail_ui_user/features/download/domain/state/get_preview_email_eml_content_shared_state.dart';
@@ -61,6 +63,11 @@ class EmailPreviewerView extends GetWidget<EmailPreviewerController> {
       useDefaultFontStyle: true,
       direction: AppUtils.getCurrentDirection(context),
       onClickHyperLinkAction: controller.onClickHyperLink,
+      iframeTooltipOptions: IframeTooltipOptions(
+        tooltipTextStyle: ThemeUtils.textStyleInter400.copyWith(
+          color: Colors.white,
+        ),
+      ),
     );
   }
 }

lib/features/manage_account/presentation/identities/widgets/signature_builder.dart

@@ -1,5 +1,7 @@
+import 'package:core/presentation/utils/theme_utils.dart';
 import 'package:core/presentation/views/html_viewer/html_content_viewer_on_web_widget.dart';
 import 'package:core/presentation/views/html_viewer/html_content_viewer_widget.dart';
+import 'package:core/presentation/views/tooltip/iframe_tooltip_overlay.dart';
 import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
 import 'package:get/state_manager.dart';
@@ -55,6 +57,11 @@ class SignatureBuilder extends StatelessWidget {
         keepAlive: true,
         disableScrolling: true,
         autoAdjustHeight: true,
+        iframeTooltipOptions: IframeTooltipOptions(
+          tooltipTextStyle: ThemeUtils.textStyleInter400.copyWith(
+            color: Colors.white,
+          ),
+        ),
       );
 
       return Stack(