rn-shiki 0.0.34 → 0.0.35

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
  {
2
2
  "name": "rn-shiki",
3
3
  "type": "module",
4
- "version": "0.0.34",
4
+ "version": "0.0.35",
5
5
  "description": "Shiki syntax highlighter for React Native.",
6
6
  "author": "Ryan Skinner <hello@ryanskinner.com>",
7
7
  "license": "MIT",
@@ -1,9 +1,16 @@
1
1
  import type { SyntaxHighlighterProps } from 'src/types/shiki'
2
2
  import React from 'react'
3
- import { Text, View } from 'react-native'
3
+ import { Platform, Text, View } from 'react-native'
4
4
  import { useSyntaxHighlighter } from '../../hooks/useSyntaxHighlighter'
5
+ import SyntaxLine from './SyntaxLine'
5
6
 
6
- function SyntaxHighlighter({ text, language, languageId, theme }: SyntaxHighlighterProps) {
7
+ const monospaceFont = Platform.select({
8
+ ios: 'Menlo',
9
+ android: 'monospace',
10
+ default: 'monospace',
11
+ })
12
+
13
+ function SyntaxHighlighter({ text, language, languageId, theme, fontSize = 14 }: SyntaxHighlighterProps & { fontSize?: number }) {
7
14
  const { tokens, error, isLoading } = useSyntaxHighlighter({
8
15
  text,
9
16
  language,
@@ -13,40 +20,47 @@ function SyntaxHighlighter({ text, language, languageId, theme }: SyntaxHighligh
13
20
 
14
21
  if (error) {
15
22
  return (
16
- <Text style={{ color: '#ff6b6b', fontFamily: 'monospace' }}>
23
+ <Text
24
+ style={{
25
+ color: '#ff6b6b',
26
+ fontFamily: monospaceFont,
27
+ fontSize,
28
+ padding: 4,
29
+ }}
30
+ >
17
31
  Error:
32
+ {' '}
18
33
  {error}
19
34
  </Text>
20
35
  )
21
36
  }
22
37
 
23
38
  if (isLoading) {
24
- return <Text style={{ color: '#666666', fontFamily: 'monospace' }}>Loading...</Text>
39
+ return (
40
+ <Text
41
+ style={{
42
+ color: '#666666',
43
+ fontFamily: monospaceFont,
44
+ fontSize,
45
+ padding: 4,
46
+ }}
47
+ >
48
+ Loading...
49
+ </Text>
50
+ )
25
51
  }
26
52
 
27
53
  return (
28
- <View>
54
+ <View style={{ flex: 1 }}>
29
55
  {tokens.map((line, lineIndex) => (
30
- <View key={`line-${lineIndex}`} style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
31
- {line.map((token, tokenIndex) => (
32
- <Text
33
- key={`${lineIndex}-${tokenIndex}`}
34
- style={{
35
- color: token.color || '#000000',
36
- fontFamily: 'monospace',
37
- fontStyle: token.fontStyle as unknown as 'normal' | 'italic',
38
- }}
39
- >
40
- {token.content.replace(/ /g, '\u00A0')}
41
- </Text>
42
- ))}
43
- <Text
44
- style={{
45
- fontFamily: 'monospace',
46
- }}
47
- >
48
- {'\n'}
49
- </Text>
56
+ <View
57
+ key={`line-${lineIndex}`}
58
+ style={{
59
+ minHeight: fontSize * 1.5, // Ensure consistent line height
60
+ paddingVertical: 2,
61
+ }}
62
+ >
63
+ <SyntaxLine line={line} fontSize={fontSize} />
50
64
  </View>
51
65
  ))}
52
66
  </View>
@@ -1,32 +1,63 @@
1
1
  import type { TokenType } from '../../types'
2
2
  import React from 'react'
3
- import { Text, View } from 'react-native'
3
+ import { Platform, Text, View } from 'react-native'
4
+
5
+ const monospaceFont = Platform.select({
6
+ ios: 'Menlo',
7
+ android: 'monospace',
8
+ default: 'monospace',
9
+ })
4
10
 
5
11
  interface SyntaxLineProps {
6
12
  line: TokenType[]
7
13
  fontSize?: number
8
14
  }
9
15
 
10
- function SyntaxLine({ line, fontSize }: SyntaxLineProps) {
16
+ function SyntaxLine({ line, fontSize = 14 }: SyntaxLineProps) {
11
17
  return (
12
- <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
18
+ <View
19
+ style={{
20
+ flexDirection: 'row',
21
+ flexWrap: 'wrap',
22
+ minHeight: fontSize * 1.5, // Match parent container
23
+ }}
24
+ >
13
25
  {line.map((token, tokenIndex) => {
14
- // Preserve whitespace
15
26
  const content = token.content.replace(/ /g, '\u00A0')
16
27
  return (
17
28
  <Text
18
- key={`${content}-${tokenIndex}`}
29
+ key={`${tokenIndex}-${content.slice(0, 8)}`}
19
30
  style={{
20
- color: token.color,
21
- fontFamily: 'monospace',
31
+ color: token.color || '#FFFFFF',
32
+ fontFamily: monospaceFont,
22
33
  fontSize,
23
34
  fontStyle: token.fontStyle as 'normal' | 'italic',
35
+ fontWeight: token.fontWeight as 'normal' | 'bold',
36
+ includeFontPadding: false,
37
+ textAlignVertical: 'center',
38
+ lineHeight: fontSize * 1.5,
39
+ ...(Platform.OS === 'ios'
40
+ ? {
41
+ paddingTop: 2, // Fine-tune iOS vertical alignment
42
+ }
43
+ : {}),
24
44
  }}
25
45
  >
26
46
  {content}
27
47
  </Text>
28
48
  )
29
49
  })}
50
+ <Text
51
+ style={{
52
+ fontFamily: monospaceFont,
53
+ fontSize,
54
+ color: 'transparent',
55
+ lineHeight: fontSize * 1.5,
56
+ height: fontSize * 1.5,
57
+ }}
58
+ >
59
+ {'\n'}
60
+ </Text>
30
61
  </View>
31
62
  )
32
63
  }
@@ -1,6 +1,6 @@
1
1
  export interface TokenType {
2
2
  content: string
3
- color: string
3
+ color?: string
4
4
  fontStyle?: string
5
5
  fontWeight?: string
6
6
  }
@@ -16,4 +16,5 @@ export interface SyntaxHighlighterProps {
16
16
  language: LanguageInput
17
17
  languageId: string
18
18
  theme?: ThemeRegistrationAny
19
+ fontSize?: number
19
20
  }