#929 Wrap PasteInput updates in a setTimeout (#1033)

* wrap PasteInput updates in a setTimeout

* just wrap the whole callback
This commit is contained in:
Eric Bailey 2023-07-19 12:08:40 -05:00 committed by GitHub
parent abd2c8e695
commit 4515559b1a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -79,52 +79,64 @@ export const TextInput = forwardRef(
})) }))
const onChangeText = useCallback( const onChangeText = useCallback(
async (newText: string) => { (newText: string) => {
const newRt = new RichText({text: newText}) /*
newRt.detectFacetsWithoutResolution() * This is a hack to bump the rendering of our styled
setRichText(newRt) * `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 newRt = new RichText({text: newText})
newRt.detectFacetsWithoutResolution()
setRichText(newRt)
const prefix = getMentionAt( const prefix = getMentionAt(
newText, newText,
textInputSelection.current?.start || 0, textInputSelection.current?.start || 0,
) )
if (prefix) { if (prefix) {
autocompleteView.setActive(true) autocompleteView.setActive(true)
autocompleteView.setPrefix(prefix.value) autocompleteView.setPrefix(prefix.value)
} else { } else {
autocompleteView.setActive(false) autocompleteView.setActive(false)
} }
const set: Set<string> = new Set() const set: Set<string> = new Set()
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 {
set.add(feature.uri)
} }
} else {
set.add(feature.uri)
} }
} }
} }
} }
}
if (!isEqual(set, suggestedLinks)) { if (!isEqual(set, suggestedLinks)) {
onSuggestedLinksChanged(set) onSuggestedLinksChanged(set)
} }
}, 1)
}, },
[ [
setRichText, setRichText,