forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
[Neue] Ligatures & composer (#5427)
* Disable contextual ligatures
* Ensure new type styles are applied to the composer
* Clean up using real devices
* Feedback
authored by
Eric Bailey
and committed by
GitHub
8a7fc9ad
15231604
+66
-25
-1
bskyweb/templates/base.html
-1
bskyweb/templates/base.html
+6
src/alf/fonts.ts
+6
src/alf/fonts.ts
+34
-19
src/view/com/composer/text-input/TextInput.tsx
+34
-19
src/view/com/composer/text-input/TextInput.tsx
···
19
19
PasteInputRef,
20
20
} from '@mattermost/react-native-paste-input'
21
21
22
+
import {isAndroid} from '#/platform/detection'
22
23
import {POST_IMG_MAX} from 'lib/constants'
23
24
import {usePalette} from 'lib/hooks/usePalette'
24
25
import {downloadAndResize} from 'lib/media/manip'
···
26
27
import {cleanError} from 'lib/strings/errors'
27
28
import {getMentionAt, insertMentionAt} from 'lib/strings/mention-manip'
28
29
import {useTheme} from 'lib/ThemeContext'
29
-
import {isIOS} from 'platform/detection'
30
30
import {
31
31
LinkFacetMatch,
32
32
suggestLinkCardUri,
33
33
} from 'view/com/composer/text-input/text-input-util'
34
34
import {Text} from 'view/com/util/text/Text'
35
+
import {atoms as a, useAlf} from '#/alf'
36
+
import {normalizeTextStyles} from '#/components/Typography'
35
37
import {Autocomplete} from './mobile/Autocomplete'
36
38
37
39
export interface TextInputRef {
···
67
69
}: TextInputProps,
68
70
ref,
69
71
) {
72
+
const {theme: t, fonts} = useAlf()
70
73
const pal = usePalette('default')
71
74
const textInput = useRef<PasteInputRef>(null)
72
75
const textInputSelection = useRef<Selection>({start: 0, end: 0})
···
180
183
[onChangeText, richtext, setAutocompletePrefix],
181
184
)
182
185
186
+
const inputTextStyle = React.useMemo(() => {
187
+
const style = normalizeTextStyles(
188
+
[a.text_xl, a.leading_snug, t.atoms.text],
189
+
{
190
+
fontScale: fonts.scaleMultiplier,
191
+
fontFamily: fonts.family,
192
+
flags: {},
193
+
},
194
+
)
195
+
196
+
/*
197
+
* `PasteInput` appears to prefer no `lineHeight`
198
+
*/
199
+
style.lineHeight = undefined
200
+
201
+
/*
202
+
* Android impl of `PasteInput` doesn't support the array syntax for `fontVariant`
203
+
*/
204
+
if (isAndroid) {
205
+
// @ts-ignore
206
+
style.fontVariant = style.fontVariant
207
+
? style.fontVariant.join(' ')
208
+
: undefined
209
+
}
210
+
return style
211
+
}, [t, fonts])
212
+
183
213
const textDecorated = useMemo(() => {
184
214
let i = 0
185
215
···
187
217
return (
188
218
<Text
189
219
key={i++}
190
-
style={[
191
-
segment.facet ? pal.link : pal.text,
192
-
styles.textInputFormatting,
193
-
]}>
220
+
style={[inputTextStyle, segment.facet ? pal.link : pal.text]}>
194
221
{segment.text}
195
222
</Text>
196
223
)
197
224
})
198
-
}, [richtext, pal.link, pal.text])
225
+
}, [richtext, pal.link, pal.text, inputTextStyle])
199
226
200
227
return (
201
228
<View style={styles.container}>
···
213
240
multiline
214
241
scrollEnabled={false}
215
242
numberOfLines={4}
216
-
style={[
217
-
pal.text,
218
-
styles.textInput,
219
-
styles.textInputFormatting,
220
-
{textAlignVertical: 'top'},
221
-
]}
243
+
style={[inputTextStyle, styles.textInput, {textAlignVertical: 'top'}]}
222
244
{...props}>
223
245
{textDecorated}
224
246
</PasteInput>
···
241
263
paddingBottom: 20,
242
264
marginLeft: 8,
243
265
alignSelf: 'flex-start',
244
-
},
245
-
textInputFormatting: {
246
-
fontSize: 18,
247
-
letterSpacing: 0.2,
248
-
fontWeight: '400',
249
-
// This is broken on ios right now, so don't set it there.
250
-
lineHeight: isIOS ? undefined : 23.4, // 1.3*16
251
266
},
252
267
})
+26
-4
src/view/com/composer/text-input/TextInput.web.tsx
+26
-4
src/view/com/composer/text-input/TextInput.web.tsx
···
22
22
LinkFacetMatch,
23
23
suggestLinkCardUri,
24
24
} from 'view/com/composer/text-input/text-input-util'
25
+
import {atoms as a, useAlf} from '#/alf'
25
26
import {Portal} from '#/components/Portal'
27
+
import {normalizeTextStyles} from '#/components/Typography'
26
28
import {Text} from '../../util/text/Text'
27
29
import {createSuggestion} from './web/Autocomplete'
28
30
import {Emoji} from './web/EmojiPicker.web'
···
58
60
TextInputProps,
59
61
ref,
60
62
) {
63
+
const {theme: t, fonts} = useAlf()
61
64
const autocomplete = useActorAutocompleteFn()
62
65
const pal = usePalette('default')
63
66
const modeClass = useColorSchemeStyle('ProseMirror-light', 'ProseMirror-dark')
···
247
250
},
248
251
}))
249
252
253
+
const inputStyle = React.useMemo(() => {
254
+
const style = normalizeTextStyles(
255
+
[a.text_lg, a.leading_snug, t.atoms.text],
256
+
{
257
+
fontScale: fonts.scaleMultiplier,
258
+
fontFamily: fonts.family,
259
+
flags: {},
260
+
},
261
+
)
262
+
/*
263
+
* TipTap component isn't a RN View and while it seems to convert
264
+
* `fontSize` to `px`, it doesn't convert `lineHeight`.
265
+
*
266
+
* `lineHeight` should always be defined here, this is defensive.
267
+
*/
268
+
style.lineHeight = style.lineHeight
269
+
? ((style.lineHeight + 'px') as unknown as number)
270
+
: undefined
271
+
return style
272
+
}, [t, fonts])
273
+
250
274
return (
251
275
<>
252
276
<View style={styles.container}>
253
-
<EditorContent
254
-
editor={editor}
255
-
style={{color: pal.text.color as string}}
256
-
/>
277
+
{/* @ts-ignore inputStyle is fine */}
278
+
<EditorContent editor={editor} style={inputStyle} />
257
279
</View>
258
280
259
281
{isDropping && (