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 😓

[rlinoz]

@QichenZhu looks like there are some conflicts, can you resolve them please?

@BartoszGrajdek were you able to test on a Samsung keyboard?

[jjcoffee]

LGTM! Tested on a virtual Samsung device and all looked okay to me.

android-chrome-2025-01-22_16.05.24.mp4

[jjcoffee]

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

Given this comment, should we ask Applause to test once we get to the App PR? @rlinoz

[BartoszGrajdek]

Sorry, I forgot about this issue due to some higher priority tasks 😓

Since @jjcoffee tested it on Samsung keyboard LGTM!

cc @tomekzaw can we merge this, or is there anything blocking us?

[BartoszGrajdek]

Given this comment, should we ask Applause to test once we get to the App PR? @rlinoz

You could actually create a build file with npm run prepare and npm pack, add it into E/App directory and update package.json to get react-native-live-markdown from that build tgz. That way you can test it before we push this to the main branch. WDYT? @tomekzaw @jjcoffee

[os-botify]

🚀 Published to npm in 0.1.223 🎉

[tomekzaw]

I've just noticed @BartoszGrajdek's comment after I merged this PR. I think it should be safe to update in E/App. If anything goes wrong, we can use patch-package or just prepare another follow-up PR.