TF-4142 Close link overlay when click email content view

This commit is contained in:
dab246
2025-11-10 12:39:00 +07:00
committed by Dat H. Pham
parent 249520b711
commit fa0ba5d689
8 changed files with 70 additions and 1 deletions
@@ -16,6 +16,7 @@ import 'package:universal_html/html.dart' as html;
typedef OnClickHyperLinkAction = Function(Uri?);
typedef OnMailtoClicked = void Function(Uri? uri);
typedef OnIFrameKeyboardShortcutAction = void Function(KeyShortcut keyShortcut);
typedef OnIFrameClickAction = void Function();
class HtmlContentViewerOnWeb extends StatefulWidget {
@@ -34,6 +35,8 @@ class HtmlContentViewerOnWeb extends StatefulWidget {
final OnIFrameKeyboardShortcutAction? onIFrameKeyboardShortcutAction;
final OnIFrameClickAction? onIFrameClickAction;
// if widthContent is bigger than width of htmlContent, set this to true let widget able to resize to width of htmlContent
final bool allowResizeToDocumentSize;
@@ -47,6 +50,7 @@ class HtmlContentViewerOnWeb extends StatefulWidget {
final double offsetHtmlContentHeight;
final double? viewMaxHeight;
final bool autoAdjustHeight;
final bool useLinkTooltipOverlay;
const HtmlContentViewerOnWeb({
Key? key,
@@ -65,12 +69,14 @@ class HtmlContentViewerOnWeb extends StatefulWidget {
this.keepAlive = false,
this.disableScrolling = false,
this.autoAdjustHeight = false,
this.useLinkTooltipOverlay = false,
this.fontSize = 14,
this.htmlContentMinHeight = ConstantsUI.htmlContentMinHeight,
this.htmlContentMinWidth = ConstantsUI.htmlContentMinWidth,
this.offsetHtmlContentHeight = ConstantsUI.htmlContentOffsetHeight,
this.viewMaxHeight,
this.onIFrameKeyboardShortcutAction,
this.onIFrameClickAction,
}) : super(key: key);
@override
@@ -124,6 +130,9 @@ class _HtmlContentViewerOnWebState extends State<HtmlContentViewerOnWeb>
} else if (_isIframeKeyboardEventTriggered(type)) {
_handleOnIFrameKeyboardEvent(data);
return;
} else if (_isIframeClickEventTriggered(type)) {
_handleOnIFrameClickEvent(data);
return;
}
if (data['message'] == iframeOnLoadMessage) {
@@ -288,6 +297,20 @@ class _HtmlContentViewerOnWebState extends State<HtmlContentViewerOnWeb>
}
}
bool _isIframeClickEventTriggered(String? type) {
return widget.useLinkTooltipOverlay &&
type?.contains('toDart: iframeClick') == true;
}
void _handleOnIFrameClickEvent(dynamic data) {
try {
log('$runtimeType::_handleOnIFrameClickEvent: $data');
widget.onIFrameClickAction?.call();
} catch (e) {
logError('$runtimeType::_handleOnIFrameClickEvent: Exception = $e');
}
}
@override
void didUpdateWidget(covariant HtmlContentViewerOnWeb oldWidget) {
super.didUpdateWidget(oldWidget);
@@ -431,6 +454,8 @@ class _HtmlContentViewerOnWebState extends State<HtmlContentViewerOnWeb>
),
if (widget.onIFrameKeyboardShortcutAction != null)
HtmlInteraction.scriptHandleIframeKeyboardListener(_createdViewId),
if (widget.useLinkTooltipOverlay)
HtmlInteraction.scriptsHandleIframeClickListener(_createdViewId),
].join();
final htmlTemplate = HtmlUtils.generateHtmlDocument(
+14
View File
@@ -405,4 +405,18 @@ class HtmlInteraction {
}
</script>
''';
static String scriptsHandleIframeClickListener(String viewId) => '''
<script type="text/javascript">
document.addEventListener('click', function (e) {
try {
const payload = {
view: '$viewId',
type: 'toDart: iframeClick',
};
window.parent.postMessage(JSON.stringify(payload), "*");
} catch (_) {}
});
</script>
''';
}
@@ -325,6 +325,12 @@ class RichTextWebController extends GetxController {
bool get isFormattingOptionsEnabled => formattingOptionsState.value == FormattingOptionsState.enabled;
void openInsertLink() {
FocusManager.instance.primaryFocus?.unfocus();
editorController.setFocus();
editorController.openInsertLinkDialog();
}
@override
void onClose() {
menuParagraphController.dispose();
@@ -9,7 +9,7 @@ import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
extension HandleInsertLinkComposerExtension on ComposerController {
void openInsertLink() {
richTextWebController?.editorController.openInsertLinkDialog();
richTextWebController?.openInsertLink();
}
LinkOverlayOptions createLinkOverlayOptions(BuildContext context) {
@@ -19,6 +19,7 @@ import 'package:tmail_ui_user/features/base/widget/optional_expanded.dart';
import 'package:tmail_ui_user/features/base/widget/optional_scroll.dart';
import 'package:tmail_ui_user/features/email/presentation/controller/single_email_controller.dart';
import 'package:tmail_ui_user/features/email/presentation/extensions/calendar_event_extension.dart';
import 'package:tmail_ui_user/features/email/presentation/extensions/handle_on_iframe_click_in_email_extension.dart';
import 'package:tmail_ui_user/features/email/presentation/extensions/validate_display_free_busy_message_extension.dart';
import 'package:tmail_ui_user/features/email/presentation/styles/email_view_styles.dart';
import 'package:tmail_ui_user/features/email/presentation/utils/email_action_reactor/email_action_reactor.dart';
@@ -340,6 +341,7 @@ class EmailView extends GetWidget<SingleEmailController> {
presentationEmail: controller.currentEmail,
scrollController: scrollController,
isInsideThreadDetailView: isInsideThreadDetailView,
onIFrameClickAction: controller.handleOnIFrameClick,
)),
],
)
@@ -361,8 +363,10 @@ class EmailView extends GetWidget<SingleEmailController> {
useDefaultFontStyle: true,
scrollController: scrollController,
enableQuoteToggle: true,
useLinkTooltipOverlay: true,
fontSize: isMobileResponsive ? 16 : 14,
onIFrameKeyboardShortcutAction: onIFrameKeyboardShortcutAction,
onIFrameClickAction: controller.handleOnIFrameClick,
),
);
} else if (PlatformInfo.isIOS) {
@@ -0,0 +1,12 @@
import 'package:core/utils/app_logger.dart';
import 'package:html_editor_enhanced/html_editor.dart';
import 'package:tmail_ui_user/features/email/presentation/controller/single_email_controller.dart';
extension HandleOnIframeClickInEmailExtension on SingleEmailController {
void handleOnIFrameClick() {
log('$runtimeType::handleOnIFrameClick');
if (LinkOverlayManager.instance.hasActiveOverlays) {
LinkOverlayManager.instance.hideAll();
}
}
}
@@ -1,3 +1,4 @@
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:flutter/material.dart';
import 'package:jmap_dart_client/jmap/mail/calendar/calendar_event.dart';
@@ -18,6 +19,7 @@ class CalendarEventDetailWidget extends StatelessWidget {
final PresentationEmail? presentationEmail;
final ScrollController? scrollController;
final bool isInsideThreadDetailView;
final OnIFrameClickAction? onIFrameClickAction;
const CalendarEventDetailWidget({
super.key,
@@ -27,6 +29,7 @@ class CalendarEventDetailWidget extends StatelessWidget {
this.presentationEmail,
this.scrollController,
this.isInsideThreadDetailView = false,
this.onIFrameClickAction,
});
@override
@@ -65,6 +68,7 @@ class CalendarEventDetailWidget extends StatelessWidget {
onMailtoDelegateAction: onMailtoDelegateAction,
scrollController: scrollController,
isInsideThreadDetailView: isInsideThreadDetailView,
onIFrameClickAction: onIFrameClickAction,
)
),
],
@@ -16,6 +16,7 @@ class EventBodyContentWidget extends StatelessWidget {
final OnMailtoDelegateAction? onMailtoDelegateAction;
final ScrollController? scrollController;
final bool isInsideThreadDetailView;
final OnIFrameClickAction? onIFrameClickAction;
const EventBodyContentWidget({
super.key,
@@ -23,6 +24,7 @@ class EventBodyContentWidget extends StatelessWidget {
this.onMailtoDelegateAction,
this.scrollController,
this.isInsideThreadDetailView = false,
this.onIFrameClickAction,
});
@override
@@ -51,9 +53,11 @@ class EventBodyContentWidget extends StatelessWidget {
widthContent: constraints.maxWidth,
contentHtml: content,
useDefaultFontStyle: true,
useLinkTooltipOverlay: true,
mailtoDelegate: onMailtoDelegateAction,
direction: AppUtils.getCurrentDirection(context),
scrollController: scrollController,
onIFrameClickAction: onIFrameClickAction,
);
})
)