rn-shiki 0.0.37-23 → 0.0.37-24
Sign up to get free protection for your applications and to get access to all the features.
package/package.json
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
import type { ColorValue, StyleProp, TextStyle } from 'react-native'
|
1
|
+
import type { ColorValue, StyleProp, TextStyle, ViewStyle } from 'react-native'
|
2
2
|
import type { SyntaxHighlighterProps } from 'src/types/shiki'
|
3
3
|
import type { ReactStyle } from '../../utils/style-transformer'
|
4
4
|
import React, { useMemo } from 'react'
|
@@ -12,49 +12,44 @@ const monospaceFont = Platform.select({
|
|
12
12
|
default: 'monospace',
|
13
13
|
})
|
14
14
|
|
15
|
-
interface
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
interface ThemeStyles {
|
21
|
-
token: TokenStyle
|
22
|
-
[key: string]: TokenStyle
|
15
|
+
interface Styles {
|
16
|
+
scrollView: ViewStyle
|
17
|
+
lineContainer: ViewStyle
|
18
|
+
token: TextStyle
|
19
|
+
container: ViewStyle
|
23
20
|
}
|
24
21
|
|
25
|
-
const baseStyles = StyleSheet.create({
|
22
|
+
const baseStyles = StyleSheet.create<Styles>({
|
26
23
|
scrollView: {
|
27
24
|
flex: 1,
|
28
25
|
minHeight: 20,
|
29
|
-
backgroundColor: '#24292e', // GitHub Dark default background
|
30
26
|
},
|
31
27
|
lineContainer: {
|
32
28
|
flexDirection: 'row',
|
33
29
|
flexWrap: 'wrap',
|
34
|
-
paddingHorizontal: 16,
|
35
|
-
paddingVertical: 8,
|
36
30
|
},
|
37
31
|
token: {
|
38
32
|
fontFamily: monospaceFont,
|
39
|
-
fontSize: 14,
|
40
|
-
color: '#e1e4e8', // GitHub Dark default text color
|
41
33
|
},
|
42
34
|
container: {
|
43
35
|
flex: 1,
|
44
36
|
},
|
45
37
|
})
|
46
38
|
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
39
|
+
type FontWeight = 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
|
40
|
+
|
41
|
+
interface TokenStyle extends Omit<TextStyle, 'color' | 'fontWeight'> {
|
42
|
+
color?: ColorValue
|
43
|
+
fontStyle?: 'normal' | 'italic'
|
44
|
+
fontWeight?: FontWeight
|
45
|
+
fontFamily?: string
|
46
|
+
}
|
47
|
+
|
48
|
+
const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, languageId, theme }) => {
|
49
|
+
const stylesheet = useMemo(() => {
|
50
|
+
const styles = getRNStylesFromShikiStyle(theme as ReactStyle)
|
51
|
+
return StyleSheet.create(styles)
|
52
|
+
}, [theme])
|
58
53
|
|
59
54
|
const { tokens } = useSyntaxHighlighter({
|
60
55
|
text,
|
@@ -64,32 +59,38 @@ const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, l
|
|
64
59
|
})
|
65
60
|
|
66
61
|
const renderToken = (token: any, index: number, lineIndex: number) => {
|
67
|
-
|
68
|
-
|
62
|
+
const styles: StyleProp<TokenStyle>[] = [baseStyles.token]
|
63
|
+
|
64
|
+
if (stylesheet.base) {
|
65
|
+
styles.push(stylesheet.base as unknown as TokenStyle)
|
66
|
+
}
|
69
67
|
|
70
|
-
// Add token-specific styles from stylesheet based on scope
|
71
68
|
const tokenScopes = Array.isArray(token.scope) ? token.scope : [token.scope]
|
72
69
|
tokenScopes.forEach((scope: string) => {
|
73
|
-
if (
|
74
|
-
|
70
|
+
if (stylesheet[scope]) {
|
71
|
+
styles.push(stylesheet[scope] as unknown as TokenStyle)
|
75
72
|
}
|
76
73
|
})
|
77
74
|
|
78
|
-
|
75
|
+
const tokenStyles: TokenStyle = {}
|
79
76
|
if (token.color) {
|
80
|
-
tokenStyles.
|
77
|
+
tokenStyles.color = token.color
|
81
78
|
}
|
82
79
|
if (token.fontStyle === 'italic') {
|
83
|
-
tokenStyles.
|
80
|
+
tokenStyles.fontStyle = 'italic'
|
84
81
|
}
|
85
82
|
if (token.fontWeight === 'bold') {
|
86
|
-
tokenStyles.
|
83
|
+
tokenStyles.fontWeight = 'bold'
|
84
|
+
}
|
85
|
+
|
86
|
+
if (Object.keys(tokenStyles).length > 0) {
|
87
|
+
styles.push(tokenStyles)
|
87
88
|
}
|
88
89
|
|
89
|
-
const
|
90
|
+
const combinedStyles = StyleSheet.flatten(styles)
|
90
91
|
|
91
92
|
return (
|
92
|
-
<Text key={`${lineIndex}-${index}`} style={
|
93
|
+
<Text key={`${lineIndex}-${index}`} style={combinedStyles}>
|
93
94
|
{token.content.replace(/ /g, '\u00A0')}
|
94
95
|
</Text>
|
95
96
|
)
|
@@ -102,8 +103,10 @@ const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, l
|
|
102
103
|
)
|
103
104
|
|
104
105
|
return (
|
105
|
-
<ScrollView horizontal showsHorizontalScrollIndicator={Platform.OS !== 'web'} style={baseStyles.scrollView
|
106
|
-
{
|
106
|
+
<ScrollView horizontal showsHorizontalScrollIndicator={Platform.OS !== 'web'} style={[baseStyles.scrollView, stylesheet.base as unknown as TokenStyle]}>
|
107
|
+
<View style={baseStyles.container} onStartShouldSetResponder={() => true}>
|
108
|
+
{tokens.map((line, index) => renderLine(line, index))}
|
109
|
+
</View>
|
107
110
|
</ScrollView>
|
108
111
|
)
|
109
112
|
}
|