Fix pasting in composition mode

[QichenZhu]

Details

Issues

In the web example app, pasting doesn’t work after typing with Samsung keyboard.

In Expensify app, pasting works, but the caret position is wrong in the case of issue Expensify/App#40025.

Cause

When pasting, mobile browsers don’t fire the compositionend event, so the component handles the pasting event in composition mode,

react-native-live-markdown/src/MarkdownTextInput.web.tsx

Lines 373 to 384 in 76258f1

	if (compositionRef.current) {
	updateTextColor(divRef.current, parsedText);
	updateSelection(e, {
	start: newCursorPosition,
	end: newCursorPosition,
	});
	divRef.current.value = parsedText;
	if (onChangeText) {
	onChangeText(parsedText);
	}
	return;
	}

and the normal process doesn’t execute.

react-native-live-markdown/src/MarkdownTextInput.web.tsx

Line 399 in 76258f1

newInputUpdate = parseText(parser, divRef.current, parsedText, processedMarkdownStyle, newCursorPosition, true, !inputType, inputType === 'pasteText');

Solution

This PR fixes the issue by detecting composition mode with the isEventComposing() function.

Related Issues

Expensify/App#40025

PROPOSAL: Expensify/App#40025 (comment)

Manual Tests

Precondition: Use a soft keyboard in composition mode, such as Samsung keyboard with autocorrection enabled.

1. Launch the web example app in Android Chrome.
2. Copy some text.
3. Clear the textbox.
4. Type "aaa".
5. Long press the caret until the context menu pops up.
6. Tap Paste.
7. Verify that the copied text pastes into the textbox.

Before	After
before.mp4	after.mp4

Linked PRs

[tomekzaw]

Hi @QichenZhu, thanks for the PR. I don't have much expertise in the web part of Live Markdown so I'll just pass it to someone else from the team who will review your PR shortly.

Looks like web E2E test is failing, could you please fix it as well?

[QichenZhu]

Thanks for your help! I’m open to any suggestions or alternative approaches.

Web E2E testing has passed.

[BartoszGrajdek]

Overall looks good, I've tested it against most of the similar issues we've had like voice recognition, diacritics, GBoard and such - on safari, firefox and chromium 👍🏻

I still need to test it with a Samsung phone though, ideally a physical device, so I'll be doing that tomorrow when I get a hold of a phone with Samsung keyboard.

Changing anything related to composition is tricky, since we've had some regressions related to that in the past, hence the throughout testing 😓