diff --git a/core/lib/utils/html/html_utils.dart b/core/lib/utils/html/html_utils.dart index 0fe3597e7..5f2985149 100644 --- a/core/lib/utils/html/html_utils.dart +++ b/core/lib/utils/html/html_utils.dart @@ -73,12 +73,15 @@ class HtmlUtils { name: 'unregisterDropListener'); static ({String name, String script}) registerSelectionChangeListener( - String viewId, - ) => + String viewId, { + bool isWebPlatform = false, + }) => ( script: ''' let lastSelectedText = ''; + const isWebPlatform = $isWebPlatform; + const sendSelectionChangeMessage = (data) => { // When iframe if (window.parent) { @@ -101,10 +104,17 @@ class HtmlUtils { function getEditableFromSelection(selection) { const node = selection?.focusNode || selection?.anchorNode; const el = node?.nodeType === Node.ELEMENT_NODE ? node : node?.parentElement; - return ( - el?.closest('.note-editor .note-editable') || - document.querySelector('.note-editor .note-editable') - ); + + if (isWebPlatform) { + return ( + el?.closest('.note-editor .note-editable') || + document.querySelector('.note-editor .note-editable') + ); + } else { + return ( + el?.closest('#editor') + ); + } } function clamp(v, min, max) { @@ -142,9 +152,13 @@ class HtmlUtils { } const lastRect = rects[rects.length - 1]; - - let x = lastRect.right - editableRect.left; - let y = lastRect.bottom - editableRect.top; + + // Avoid native selection marks in mobile + // Offset has been arbitrary determined to avoid selection marks on Android and iOS + const buttonOffset = isWebPlatform ? { x: 0, y: 0 } : { x: 22, y: -20 }; + + let x = lastRect.right - editableRect.left + buttonOffset.x; + let y = lastRect.bottom - editableRect.top + buttonOffset.y; const isInside = lastRect.bottom >= editableRect.top && diff --git a/lib/features/composer/presentation/widgets/mobile/mobile_editor_widget.dart b/lib/features/composer/presentation/widgets/mobile/mobile_editor_widget.dart index f5fb4170c..e4f3d9b49 100644 --- a/lib/features/composer/presentation/widgets/mobile/mobile_editor_widget.dart +++ b/lib/features/composer/presentation/widgets/mobile/mobile_editor_widget.dart @@ -66,7 +66,7 @@ class _MobileEditorState extends State with TextSelectionMix _editorController = editorApi.webViewController; registerSelectionChange = - HtmlUtils.registerSelectionChangeListener(_createdViewId); + HtmlUtils.registerSelectionChangeListener(_createdViewId, isWebPlatform: PlatformInfo.isWeb); _editorController?.addJavaScriptHandler( handlerName: registerSelectionChange!.name, diff --git a/lib/features/composer/presentation/widgets/web/web_editor_widget.dart b/lib/features/composer/presentation/widgets/web/web_editor_widget.dart index c8ccd7a7e..b825e19fb 100644 --- a/lib/features/composer/presentation/widgets/web/web_editor_widget.dart +++ b/lib/features/composer/presentation/widgets/web/web_editor_widget.dart @@ -4,6 +4,7 @@ import 'package:collection/collection.dart'; import 'package:core/utils/app_logger.dart'; import 'package:core/utils/html/html_template.dart'; import 'package:core/utils/html/html_utils.dart'; +import 'package:core/utils/platform_info.dart'; import 'package:flutter/material.dart'; import 'package:html_editor_enhanced/html_editor.dart'; import 'package:tmail_ui_user/features/composer/presentation/mixin/text_selection_mixin.dart'; @@ -104,7 +105,7 @@ class _WebEditorState extends State with TextSelectionMixin { _editorController = widget.editorController; final registerSelectionChange = - HtmlUtils.registerSelectionChangeListener(_createdViewId); + HtmlUtils.registerSelectionChangeListener(_createdViewId, isWebPlatform: PlatformInfo.isWeb); _selectionChangeScript = WebScript( name: registerSelectionChange.name, script: registerSelectionChange.script, @@ -224,7 +225,7 @@ class _WebEditorState extends State with TextSelectionMixin { _editorController.evaluateJavascriptWeb( HtmlUtils.registerDropListener.name); _editorController.evaluateJavascriptWeb( - HtmlUtils.registerSelectionChangeListener(_createdViewId).name); + _selectionChangeScript.name); _editorListenerRegistered = true; } },