From 4a20b30c06e2bbf3ff9e34d59165134c8236a72e Mon Sep 17 00:00:00 2001 From: Jakub Szymczak Date: Tue, 4 Jun 2024 15:27:52 +0200 Subject: [PATCH 1/2] make TextInput ignore composition on mWeb --- src/MarkdownTextInput.web.tsx | 4 ++-- src/web/browserUtils.ts | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/MarkdownTextInput.web.tsx b/src/MarkdownTextInput.web.tsx index 7e56c180..7eeb5251 100644 --- a/src/MarkdownTextInput.web.tsx +++ b/src/MarkdownTextInput.web.tsx @@ -16,6 +16,7 @@ import {StyleSheet} from 'react-native'; import * as ParseUtils from './web/parserUtils'; import * as CursorUtils from './web/cursorUtils'; import * as StyleUtils from './styleUtils'; +import * as BrowserUtils from './web/browserUtils'; import type * as MarkdownTextInputDecoratorViewNativeComponent from './MarkdownTextInputDecoratorViewNativeComponent'; import './web/MarkdownTextInput.css'; import InputHistory from './web/InputHistory'; @@ -336,8 +337,7 @@ const MarkdownTextInput = React.forwardRef( return; } const changedText = e.target.innerText; - - if (compositionRef.current) { + if (compositionRef.current && !BrowserUtils.isMobile) { updateTextColor(divRef.current, changedText); compositionRef.current = false; return; diff --git a/src/web/browserUtils.ts b/src/web/browserUtils.ts index 0553197d..79648224 100644 --- a/src/web/browserUtils.ts +++ b/src/web/browserUtils.ts @@ -1,4 +1,5 @@ const isFirefox = navigator.userAgent.toLowerCase().includes('firefox'); const isChromium = 'chrome' in window; +const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Silk|Opera Mini/i.test(navigator.userAgent); -export {isFirefox, isChromium}; +export {isFirefox, isChromium, isMobile}; From 5dd0953ba8e6e7fe7a52892a28000f619f1f3549 Mon Sep 17 00:00:00 2001 From: Jakub Szymczak Date: Thu, 6 Jun 2024 12:41:14 +0200 Subject: [PATCH 2/2] add comment explaining copy source --- src/web/browserUtils.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/web/browserUtils.ts b/src/web/browserUtils.ts index 79648224..a70d97c9 100644 --- a/src/web/browserUtils.ts +++ b/src/web/browserUtils.ts @@ -1,5 +1,11 @@ const isFirefox = navigator.userAgent.toLowerCase().includes('firefox'); const isChromium = 'chrome' in window; + +/** + * Whether the platform is a mobile browser. + * Copied from Expensify App https://github.com/Expensify/App/blob/90dee7accae79c49debf30354c160cab6c52c423/src/libs/Browser/index.website.ts#L41 + * + */ const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Silk|Opera Mini/i.test(navigator.userAgent); export {isFirefox, isChromium, isMobile};