rn-shiki 0.0.37-15 → 0.0.37-17
Sign up to get free protection for your applications and to get access to all the features.
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
import type { SyntaxHighlighterProps } from 'src/types/shiki'
|
2
2
|
import type { ReactStyle } from '../../utils/style-transformer'
|
3
3
|
import React, { useMemo } from 'react'
|
4
|
-
import { Platform, ScrollView, StyleSheet, Text,
|
4
|
+
import { Platform, ScrollView, StyleSheet, Text, View } from 'react-native'
|
5
5
|
import { useSyntaxHighlighter } from '../../hooks/useSyntaxHighlighter'
|
6
6
|
import { getRNStylesFromShikiStyle } from '../../utils/style-transformer'
|
7
7
|
|
@@ -38,25 +38,29 @@ const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, l
|
|
38
38
|
})
|
39
39
|
|
40
40
|
const renderToken = (token: any, index: number, lineIndex: number) => {
|
41
|
-
|
42
|
-
|
41
|
+
// Ensure to collect all styles associated with the token's scopes
|
42
|
+
const tokenScopes = Array.isArray(token.scope) ? token.scope : [token.scope]
|
43
|
+
const tokenStylesArray = tokenScopes.map((scope: string) => stylesheet[scope] || {})
|
44
|
+
const combinedStyles = StyleSheet.flatten([
|
45
|
+
...tokenStylesArray,
|
43
46
|
{
|
44
47
|
fontFamily: monospaceFont,
|
45
|
-
...(token.color && { color: token.color }),
|
46
|
-
...(token.fontStyle === 'italic' && stylesheet.italic),
|
47
|
-
...(token.fontWeight === 'bold' && stylesheet.bold),
|
48
48
|
},
|
49
|
+
...(token.color && { color: token.color }),
|
50
|
+
...(token.fontStyle === 'italic' ? [{ fontStyle: 'italic' }] : []),
|
51
|
+
...(token.fontStyle === 'bold' ? [{ fontWeight: 'bold' }] : []),
|
49
52
|
])
|
50
53
|
|
51
|
-
console.log(`Rendering token: ${token.content}, styles:`,
|
54
|
+
console.log(`Rendering token: ${token.content}, styles:`, combinedStyles)
|
52
55
|
|
53
56
|
return (
|
54
|
-
<Text key={`${lineIndex}-${index}`} style={
|
57
|
+
<Text key={`${lineIndex}-${index}`} style={combinedStyles}>
|
55
58
|
{token.content.replace(/ /g, '\u00A0')}
|
56
59
|
</Text>
|
57
60
|
)
|
58
61
|
}
|
59
62
|
|
63
|
+
// In the renderLine and renderToken flow
|
60
64
|
const renderLine = (line: any[], lineIndex: number) => {
|
61
65
|
console.log(`Rendering line ${lineIndex}:`, line)
|
62
66
|
return (
|
@@ -1,35 +1,57 @@
|
|
1
|
-
import type { CSSProperties } from 'react'
|
2
1
|
import type { TextStyle } from 'react-native'
|
3
2
|
import transform from 'css-to-react-native'
|
4
3
|
|
5
4
|
export interface HighlighterStyleSheet {
|
6
5
|
[key: string]: TextStyle
|
7
6
|
}
|
8
|
-
|
7
|
+
|
8
|
+
export type ReactStyle = Record<string, TextStyle>
|
9
9
|
|
10
10
|
const ALLOWED_STYLE_PROPERTIES: Record<string, boolean> = {
|
11
11
|
color: true,
|
12
|
-
background: true,
|
13
12
|
backgroundColor: true,
|
14
13
|
fontWeight: true,
|
15
14
|
fontStyle: true,
|
16
15
|
}
|
17
16
|
|
18
|
-
export function
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
17
|
+
export function convertTokenColorsToReactStyle(tokenColors: any[]): ReactStyle {
|
18
|
+
const styleMap: ReactStyle = {}
|
19
|
+
|
20
|
+
tokenColors.forEach((token) => {
|
21
|
+
const { scope, settings } = token
|
22
|
+
const styleEntries: Array<[string, string]> = []
|
23
|
+
|
24
|
+
if (settings.foreground)
|
25
|
+
styleEntries.push(['color', settings.foreground])
|
26
|
+
if (settings.background)
|
27
|
+
styleEntries.push(['backgroundColor', settings.background])
|
28
|
+
if (settings.fontStyle) {
|
29
|
+
if (settings.fontStyle.includes('italic'))
|
30
|
+
styleEntries.push(['fontStyle', 'italic'])
|
31
|
+
if (settings.fontStyle.includes('bold'))
|
32
|
+
styleEntries.push(['fontWeight', 'bold'])
|
33
|
+
}
|
26
34
|
|
27
|
-
|
28
|
-
|
35
|
+
if (styleEntries.length > 0) {
|
36
|
+
const transformedStyle = transform(styleEntries.filter(([key]) => ALLOWED_STYLE_PROPERTIES[key]))
|
29
37
|
|
30
|
-
|
38
|
+
const scopes = Array.isArray(scope) ? scope : [scope]
|
39
|
+
scopes.forEach((sc: string) => {
|
40
|
+
styleMap[sc] = { ...(styleMap[sc] || {}), ...transformedStyle }
|
41
|
+
})
|
42
|
+
}
|
43
|
+
})
|
44
|
+
|
45
|
+
return styleMap
|
46
|
+
}
|
31
47
|
|
32
|
-
|
33
|
-
|
34
|
-
)
|
48
|
+
export function getRNStylesFromShikiStyle(theme: any): HighlighterStyleSheet {
|
49
|
+
console.log('Converting theme to React Native styles:', theme)
|
50
|
+
if (!theme.tokenColors) {
|
51
|
+
console.error('Provided theme does not contain \'tokenColors\'.')
|
52
|
+
return {}
|
53
|
+
}
|
54
|
+
const reactStyle = convertTokenColorsToReactStyle(theme.tokenColors)
|
55
|
+
console.log('Converted theme to React Native styles:', reactStyle)
|
56
|
+
return reactStyle
|
35
57
|
}
|