rn-shiki 0.0.37-4 → 0.0.37-5
Sign up to get free protection for your applications and to get access to all the features.
package/package.json
CHANGED
@@ -1,5 +1,7 @@
|
|
1
|
+
import type { ThemeRegistrationAny } from 'shiki'
|
2
|
+
import type { SyntaxHighlighterProps } from 'src/types/shiki'
|
1
3
|
import React from 'react'
|
2
|
-
import { Platform, ScrollView,
|
4
|
+
import { Platform, ScrollView, StyleSheet, Text, type TextStyle, View } from 'react-native'
|
3
5
|
import { useSyntaxHighlighter } from '../../hooks/useSyntaxHighlighter'
|
4
6
|
import { convertShikiTheme } from '../../utils/style-transformer'
|
5
7
|
|
@@ -9,15 +11,6 @@ const monospaceFont = Platform.select({
|
|
9
11
|
default: 'monospace',
|
10
12
|
})
|
11
13
|
|
12
|
-
interface SyntaxHighlighterProps {
|
13
|
-
text: string
|
14
|
-
language: any
|
15
|
-
languageId: string
|
16
|
-
theme: any
|
17
|
-
textStyle?: TextStyle
|
18
|
-
scrollViewProps?: ScrollViewProps
|
19
|
-
}
|
20
|
-
|
21
14
|
const styles = StyleSheet.create({
|
22
15
|
scrollView: {
|
23
16
|
flex: 1,
|
@@ -32,8 +25,8 @@ const styles = StyleSheet.create({
|
|
32
25
|
},
|
33
26
|
})
|
34
27
|
|
35
|
-
const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, languageId, theme
|
36
|
-
const themeStyles = React.useMemo(() => convertShikiTheme(theme), [theme])
|
28
|
+
const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, languageId, theme }) => {
|
29
|
+
const themeStyles = React.useMemo(() => convertShikiTheme(theme as ThemeRegistrationAny), [theme])
|
37
30
|
const { tokens } = useSyntaxHighlighter({
|
38
31
|
text,
|
39
32
|
language,
|
@@ -48,7 +41,6 @@ const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, l
|
|
48
41
|
...(token.color && { color: token.color }),
|
49
42
|
...(token.fontStyle === 'italic' && themeStyles.italic),
|
50
43
|
...(token.fontWeight === 'bold' && themeStyles.bold),
|
51
|
-
...textStyle,
|
52
44
|
}
|
53
45
|
|
54
46
|
return (
|
@@ -65,13 +57,7 @@ const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, l
|
|
65
57
|
)
|
66
58
|
|
67
59
|
return (
|
68
|
-
<ScrollView
|
69
|
-
horizontal
|
70
|
-
showsHorizontalScrollIndicator={Platform.OS !== 'web'}
|
71
|
-
style={styles.scrollView}
|
72
|
-
contentContainerStyle={[styles.contentContainer, themeStyles.container, scrollViewProps?.contentContainerStyle]}
|
73
|
-
{...scrollViewProps}
|
74
|
-
>
|
60
|
+
<ScrollView horizontal showsHorizontalScrollIndicator={Platform.OS !== 'web'} style={styles.scrollView}>
|
75
61
|
<View onStartShouldSetResponder={() => true}>{tokens.map((line, index) => renderLine(line, index))}</View>
|
76
62
|
</ScrollView>
|
77
63
|
)
|
package/src/index.ts
CHANGED
@@ -1,81 +0,0 @@
|
|
1
|
-
import type { TokenType } from '../../types'
|
2
|
-
import type { RNTokenStyle } from '../../utils/style-transformer'
|
3
|
-
import React from 'react'
|
4
|
-
import { Platform, StyleSheet, Text, View } from 'react-native'
|
5
|
-
|
6
|
-
const monospaceFont = Platform.select({
|
7
|
-
ios: 'Menlo',
|
8
|
-
android: 'monospace',
|
9
|
-
default: 'monospace',
|
10
|
-
})
|
11
|
-
|
12
|
-
const styles = StyleSheet.create({
|
13
|
-
lineContainer: {
|
14
|
-
flexDirection: 'row',
|
15
|
-
flexWrap: 'wrap',
|
16
|
-
},
|
17
|
-
token: {
|
18
|
-
includeFontPadding: false,
|
19
|
-
},
|
20
|
-
})
|
21
|
-
|
22
|
-
interface SyntaxLineProps {
|
23
|
-
line: TokenType[]
|
24
|
-
fontSize?: number
|
25
|
-
isLastLine?: boolean
|
26
|
-
themeStyles: {
|
27
|
-
backgroundColor: string
|
28
|
-
defaultColor: string
|
29
|
-
styles: Record<string, RNTokenStyle>
|
30
|
-
}
|
31
|
-
}
|
32
|
-
|
33
|
-
function SyntaxLine({ line, fontSize = 14, isLastLine = false, themeStyles }: SyntaxLineProps) {
|
34
|
-
const lineHeight = Math.floor(fontSize * 1.5)
|
35
|
-
|
36
|
-
return (
|
37
|
-
<View
|
38
|
-
style={[
|
39
|
-
styles.lineContainer,
|
40
|
-
{
|
41
|
-
minHeight: lineHeight,
|
42
|
-
paddingBottom: !isLastLine ? 4 : 0,
|
43
|
-
},
|
44
|
-
]}
|
45
|
-
>
|
46
|
-
{line.map((token, tokenIndex) => {
|
47
|
-
const content = token.content.replace(/ /g, '\u00A0')
|
48
|
-
// Use converted theme styles
|
49
|
-
const tokenStyle = token.color ? { color: token.color } : { color: themeStyles.defaultColor }
|
50
|
-
|
51
|
-
return (
|
52
|
-
<Text
|
53
|
-
key={`${tokenIndex}-${content.slice(0, 8)}`}
|
54
|
-
style={[
|
55
|
-
styles.token,
|
56
|
-
{
|
57
|
-
...tokenStyle,
|
58
|
-
fontFamily: monospaceFont,
|
59
|
-
fontSize,
|
60
|
-
fontStyle: token.fontStyle as 'normal' | 'italic',
|
61
|
-
fontWeight: token.fontWeight as 'normal' | 'bold',
|
62
|
-
lineHeight,
|
63
|
-
height: lineHeight,
|
64
|
-
textAlignVertical: 'center',
|
65
|
-
...(Platform.OS === 'ios'
|
66
|
-
? {
|
67
|
-
paddingTop: 2,
|
68
|
-
}
|
69
|
-
: {}),
|
70
|
-
},
|
71
|
-
]}
|
72
|
-
>
|
73
|
-
{content}
|
74
|
-
</Text>
|
75
|
-
)
|
76
|
-
})}
|
77
|
-
</View>
|
78
|
-
)
|
79
|
-
}
|
80
|
-
|
81
|
-
export default SyntaxLine
|