rn-shiki 0.0.37-25 → 0.0.37-26

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.37-25",
4
+ "version": "0.0.37-26",
5
5
  "description": "Shiki syntax highlighter for React Native.",
6
6
  "author": "Ryan Skinner <hello@ryanskinner.com>",
7
7
  "license": "MIT",
@@ -1,5 +1,4 @@
1
1
  import type { TextStyle } from 'react-native'
2
- import transform from 'css-to-react-native'
3
2
 
4
3
  export interface HighlighterStyleSheet {
5
4
  [key: string]: TextStyle
@@ -9,7 +8,15 @@ export type ReactStyle = Record<string, TextStyle>
9
8
 
10
9
  // Helper function to convert hex color to RGB
11
10
  function hexToRgb(hex: string): { r: number, g: number, b: number } | null {
12
- const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
11
+ // Remove # if present
12
+ hex = hex.replace(/^#/, '')
13
+
14
+ // Handle both 3 and 6 digit hex
15
+ if (hex.length === 3) {
16
+ hex = `${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`
17
+ }
18
+
19
+ const result = /^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
13
20
  return result
14
21
  ? {
15
22
  r: Number.parseInt(result[1]!, 16),
@@ -19,18 +26,25 @@ function hexToRgb(hex: string): { r: number, g: number, b: number } | null {
19
26
  : null
20
27
  }
21
28
 
22
- // Helper function to normalize color values
23
29
  function normalizeColor(color: string | undefined): string {
24
- if (!color)
30
+ if (!color) {
25
31
  return 'transparent'
32
+ }
26
33
 
27
- // Type guard to ensure color is string before we call string methods
28
- if (typeof color === 'string' && color.startsWith('#')) {
34
+ // Handle hex colors
35
+ if (color.startsWith('#')) {
29
36
  const rgb = hexToRgb(color)
30
37
  if (rgb) {
31
38
  return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`
32
39
  }
33
40
  }
41
+
42
+ // Handle rgb/rgba
43
+ if (color.startsWith('rgb')) {
44
+ return color
45
+ }
46
+
47
+ // Handle named colors
34
48
  return color
35
49
  }
36
50
 
@@ -44,64 +58,86 @@ export function convertTokenColorsToReactStyle(tokenColors: any[]): ReactStyle {
44
58
  }
45
59
 
46
60
  tokenColors.forEach((token) => {
47
- if (!token.settings || !token.scope)
61
+ if (!token.settings)
48
62
  return
49
63
 
64
+ // Handle global theme settings
65
+ if (!token.scope) {
66
+ if (token.settings.foreground) {
67
+ styleMap.default!.color = normalizeColor(token.settings.foreground)
68
+ }
69
+ if (token.settings.background) {
70
+ styleMap.default!.backgroundColor = normalizeColor(token.settings.background)
71
+ }
72
+ return
73
+ }
74
+
50
75
  const scopes = Array.isArray(token.scope) ? token.scope : [token.scope]
51
- const styleEntries: Array<[string, string]> = []
76
+ const style: TextStyle = {}
52
77
 
53
- // Only add styles if they exist
54
78
  if (token.settings.foreground) {
55
- styleEntries.push(['color', normalizeColor(token.settings.foreground)])
79
+ style.color = normalizeColor(token.settings.foreground)
56
80
  }
57
81
  if (token.settings.background) {
58
- styleEntries.push(['backgroundColor', normalizeColor(token.settings.background)])
82
+ style.backgroundColor = normalizeColor(token.settings.background)
59
83
  }
60
84
  if (token.settings.fontStyle) {
61
85
  if (token.settings.fontStyle.includes('italic')) {
62
- styleEntries.push(['fontStyle', 'italic'])
86
+ style.fontStyle = 'italic'
63
87
  }
64
88
  if (token.settings.fontStyle.includes('bold')) {
65
- styleEntries.push(['fontWeight', 'bold'])
89
+ style.fontWeight = 'bold'
66
90
  }
67
91
  }
68
92
 
69
- if (styleEntries.length > 0) {
70
- const transformedStyle = transform(styleEntries)
71
-
72
- scopes.forEach((scope: string) => {
73
- if (typeof scope === 'string') {
74
- styleMap[scope] = { ...(styleMap[scope] || {}), ...transformedStyle }
75
- }
76
- })
77
- }
93
+ scopes.forEach((scope: string) => {
94
+ styleMap[scope] = { ...(styleMap[scope] || {}), ...style }
95
+ })
78
96
  })
79
97
 
80
98
  return styleMap
81
99
  }
82
100
 
83
- export function getRNStylesFromShikiStyle(theme: any): HighlighterStyleSheet {
84
- if (!theme || !theme.tokenColors) {
85
- console.error('Provided theme does not contain \'tokenColors\'.')
101
+ interface ThemeColors {
102
+ 'editor.background'?: string
103
+ 'editor.foreground'?: string
104
+ [key: string]: string | undefined
105
+ }
106
+
107
+ interface Theme {
108
+ colors?: ThemeColors
109
+ tokenColors?: any[]
110
+ }
111
+
112
+ export function getRNStylesFromShikiStyle(theme: Theme): HighlighterStyleSheet {
113
+ if (!theme) {
86
114
  return {}
87
115
  }
88
116
 
89
117
  try {
90
- // Convert theme colors to React Native styles
91
- const styles = convertTokenColorsToReactStyle(theme.tokenColors)
118
+ const styles: HighlighterStyleSheet = {}
119
+
120
+ // Convert token colors
121
+ if (theme.tokenColors) {
122
+ Object.assign(styles, convertTokenColorsToReactStyle(theme.tokenColors))
123
+ }
92
124
 
93
- // Add theme-specific base styles if they exist
125
+ // Add theme-specific editor styles
94
126
  if (theme.colors) {
127
+ styles.editor = {
128
+ backgroundColor: normalizeColor(theme.colors['editor.background']),
129
+ }
95
130
  styles.base = {
96
131
  color: normalizeColor(theme.colors['editor.foreground']),
97
- backgroundColor: normalizeColor(theme.colors['editor.background']),
98
132
  }
99
133
  }
100
134
 
101
135
  return styles
102
136
  }
103
137
  catch {
104
- console.error('Error converting theme styles')
105
- return {}
138
+ return {
139
+ editor: { backgroundColor: '#1e1e1e' },
140
+ base: { color: '#d4d4d4' },
141
+ }
106
142
  }
107
143
  }