Remove dangerous derived state from RichText (#3007)

* Remove facet resolution from RichText

* Remove derived state
zio/stable
dan 2024-02-28 01:35:25 +00:00 committed by GitHub
parent 603f3c0be9
commit 2d14d0e2db
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 8 additions and 23 deletions

View File

@ -7,7 +7,6 @@ import {atoms as a, TextStyleProp, flatten, useTheme, web, native} from '#/alf'
import {InlineLink} from '#/components/Link' import {InlineLink} from '#/components/Link'
import {Text, TextProps} from '#/components/Typography' import {Text, TextProps} from '#/components/Typography'
import {toShortUrl} from 'lib/strings/url-helpers' import {toShortUrl} from 'lib/strings/url-helpers'
import {getAgent} from '#/state/session'
import {TagMenu, useTagMenuControl} from '#/components/TagMenu' import {TagMenu, useTagMenuControl} from '#/components/TagMenu'
import {isNative} from '#/platform/detection' import {isNative} from '#/platform/detection'
import {useInteractionState} from '#/components/hooks/useInteractionState' import {useInteractionState} from '#/components/hooks/useInteractionState'
@ -20,7 +19,6 @@ export function RichText({
style, style,
numberOfLines, numberOfLines,
disableLinks, disableLinks,
resolveFacets = false,
selectable, selectable,
enableTags = false, enableTags = false,
authorHandle, authorHandle,
@ -30,31 +28,16 @@ export function RichText({
testID?: string testID?: string
numberOfLines?: number numberOfLines?: number
disableLinks?: boolean disableLinks?: boolean
resolveFacets?: boolean
enableTags?: boolean enableTags?: boolean
authorHandle?: string authorHandle?: string
}) { }) {
const detected = React.useRef(false) const richText = React.useMemo(
const [richText, setRichText] = React.useState<RichTextAPI>(() => () =>
value instanceof RichTextAPI ? value : new RichTextAPI({text: value}), value instanceof RichTextAPI ? value : new RichTextAPI({text: value}),
[value],
) )
const styles = [a.leading_snug, flatten(style)] const styles = [a.leading_snug, flatten(style)]
React.useEffect(() => {
if (!resolveFacets) return
async function detectFacets() {
const rt = new RichTextAPI({text: richText.text})
await rt.detectFacets(getAgent())
setRichText(rt)
}
if (!detected.current) {
detected.current = true
detectFacets()
}
}, [richText, setRichText, resolveFacets])
const {text, facets} = richText const {text, facets} = richText
if (!facets?.length) { if (!facets?.length) {

View File

@ -22,12 +22,14 @@ export function Typography() {
<Text style={[a.text_2xs]}>atoms.text_2xs</Text> <Text style={[a.text_2xs]}>atoms.text_2xs</Text>
<RichText <RichText
resolveFacets // TODO: This only supports already resolved facets.
// Resolving them on read is bad anyway.
value={`This is rich text. It can have mentions like @bsky.app or links like https://bsky.social`} value={`This is rich text. It can have mentions like @bsky.app or links like https://bsky.social`}
/> />
<RichText <RichText
selectable selectable
resolveFacets // TODO: This only supports already resolved facets.
// Resolving them on read is bad anyway.
value={`This is rich text. It can have mentions like @bsky.app or links like https://bsky.social`} value={`This is rich text. It can have mentions like @bsky.app or links like https://bsky.social`}
style={[a.text_xl]} style={[a.text_xl]}
/> />