Remove dangerous derived state from RichText (#3007)
* Remove facet resolution from RichText * Remove derived statezio/stable
parent
603f3c0be9
commit
2d14d0e2db
|
@ -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) {
|
||||||
|
|
|
@ -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]}
|
||||||
/>
|
/>
|
||||||
|
|
Loading…
Reference in New Issue