forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Fix richtext link rendering
+44
-16
+35
-1
src/view/com/util/Link.tsx
+35
-1
src/view/com/util/Link.tsx
···
1
1
import React from 'react'
2
2
import {observer} from 'mobx-react-lite'
3
-
import {StyleProp, Text, TouchableOpacity, ViewStyle} from 'react-native'
3
+
import {
4
+
StyleProp,
5
+
Text,
6
+
TouchableOpacity,
7
+
TextStyle,
8
+
ViewStyle,
9
+
} from 'react-native'
4
10
import {useStores} from '../../../state'
5
11
import {LinkActionsModel} from '../../../state/models/shell-ui'
6
12
···
21
27
store.nav.navigate(href)
22
28
}
23
29
const onLongPress = () => {
30
+
store.shell.closeModal() // close any active modals
24
31
store.nav.newTab(href, title)
25
32
// store.shell.openModal(new LinkActionsModel(href, title || href))
26
33
}
···
34
41
</TouchableOpacity>
35
42
)
36
43
})
44
+
45
+
export const TextLink = observer(function Link({
46
+
style,
47
+
href,
48
+
title,
49
+
text,
50
+
}: {
51
+
style?: StyleProp<TextStyle>
52
+
href: string
53
+
title?: string
54
+
text: string
55
+
}) {
56
+
const store = useStores()
57
+
const onPress = () => {
58
+
store.shell.closeModal() // close any active modals
59
+
store.nav.navigate(href)
60
+
}
61
+
const onLongPress = () => {
62
+
store.shell.closeModal() // close any active modals
63
+
store.nav.newTab(href, title)
64
+
}
65
+
return (
66
+
<Text style={style} onPress={onPress} onLongPress={onLongPress}>
67
+
{text}
68
+
</Text>
69
+
)
70
+
})
+9
-15
src/view/com/util/RichText.tsx
+9
-15
src/view/com/util/RichText.tsx
···
1
1
import React from 'react'
2
-
import {Text, TextStyle, StyleProp} from 'react-native'
3
-
import {Link} from './Link'
2
+
import {Text, TextStyle, StyleProp, View} from 'react-native'
3
+
import {TextLink} from './Link'
4
4
import {s} from '../../lib/styles'
5
5
6
6
type TextSlice = {start: number; end: number}
···
30
30
let key = 0
31
31
for (const segment of segments) {
32
32
if (typeof segment === 'string') {
33
-
els.push(
34
-
<Text key={key} style={style}>
35
-
{segment}
36
-
</Text>,
37
-
)
33
+
els.push(segment)
38
34
} else {
39
35
els.push(
40
-
<Link
36
+
<TextLink
41
37
key={key}
42
-
title={segment.text}
43
-
href={`/profile/${segment.entity.value}`}>
44
-
<Text key={key} style={[style, s.blue3]}>
45
-
{segment.text}
46
-
</Text>
47
-
</Link>,
38
+
text={segment.text}
39
+
href={`/profile/${segment.entity.value}`}
40
+
style={[style, s.blue3]}
41
+
/>,
48
42
)
49
43
}
50
44
key++
51
45
}
52
-
return <>{els}</>
46
+
return <Text style={style}>{els}</Text>
53
47
}
54
48
55
49
function sortByIndex(a: Entity, b: Entity) {