Fix Android composer cursor bug by removing `setTimeout` from native composer `onChangeText` (#4922)

zio/stable
Hailey 2024-08-12 08:14:02 -07:00 committed by GitHub
parent 75c19b2dc2
commit db7a744433
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 44 additions and 56 deletions

View File

@ -85,71 +85,59 @@ export const TextInput = forwardRef(function TextInputImpl(
const pastSuggestedUris = useRef(new Set<string>()) const pastSuggestedUris = useRef(new Set<string>())
const prevDetectedUris = useRef(new Map<string, LinkFacetMatch>()) const prevDetectedUris = useRef(new Map<string, LinkFacetMatch>())
const onChangeText = useCallback( const onChangeText = useCallback(
(newText: string) => { async (newText: string) => {
/* const mayBePaste = newText.length > prevLength.current + 1
* This is a hack to bump the rendering of our styled
* `textDecorated` to _after_ whatever processing is happening
* within the `PasteInput` library. Without this, the elements in
* `textDecorated` are not correctly painted to screen.
*
* NB: we tried a `0` timeout as well, but only positive values worked.
*
* @see https://github.com/bluesky-social/social-app/issues/929
*/
setTimeout(async () => {
const mayBePaste = newText.length > prevLength.current + 1
const newRt = new RichText({text: newText}) const newRt = new RichText({text: newText})
newRt.detectFacetsWithoutResolution() newRt.detectFacetsWithoutResolution()
setRichText(newRt) setRichText(newRt)
const prefix = getMentionAt( const prefix = getMentionAt(
newText, newText,
textInputSelection.current?.start || 0, textInputSelection.current?.start || 0,
) )
if (prefix) { if (prefix) {
setAutocompletePrefix(prefix.value) setAutocompletePrefix(prefix.value)
} else if (autocompletePrefix) { } else if (autocompletePrefix) {
setAutocompletePrefix('') setAutocompletePrefix('')
} }
const nextDetectedUris = new Map<string, LinkFacetMatch>() const nextDetectedUris = new Map<string, LinkFacetMatch>()
if (newRt.facets) { if (newRt.facets) {
for (const facet of newRt.facets) { for (const facet of newRt.facets) {
for (const feature of facet.features) { for (const feature of facet.features) {
if (AppBskyRichtextFacet.isLink(feature)) { if (AppBskyRichtextFacet.isLink(feature)) {
if (isUriImage(feature.uri)) { if (isUriImage(feature.uri)) {
const res = await downloadAndResize({ const res = await downloadAndResize({
uri: feature.uri, uri: feature.uri,
width: POST_IMG_MAX.width, width: POST_IMG_MAX.width,
height: POST_IMG_MAX.height, height: POST_IMG_MAX.height,
mode: 'contain', mode: 'contain',
maxSize: POST_IMG_MAX.size, maxSize: POST_IMG_MAX.size,
timeout: 15e3, timeout: 15e3,
}) })
if (res !== undefined) { if (res !== undefined) {
onPhotoPasted(res.path) onPhotoPasted(res.path)
}
} else {
nextDetectedUris.set(feature.uri, {facet, rt: newRt})
} }
} else {
nextDetectedUris.set(feature.uri, {facet, rt: newRt})
} }
} }
} }
} }
const suggestedUri = suggestLinkCardUri( }
mayBePaste, const suggestedUri = suggestLinkCardUri(
nextDetectedUris, mayBePaste,
prevDetectedUris.current, nextDetectedUris,
pastSuggestedUris.current, prevDetectedUris.current,
) pastSuggestedUris.current,
prevDetectedUris.current = nextDetectedUris )
if (suggestedUri) { prevDetectedUris.current = nextDetectedUris
onNewLink(suggestedUri) if (suggestedUri) {
} onNewLink(suggestedUri)
prevLength.current = newText.length }
}, 1) prevLength.current = newText.length
}, },
[setRichText, autocompletePrefix, onPhotoPasted, onNewLink], [setRichText, autocompletePrefix, onPhotoPasted, onNewLink],
) )