rn-shiki 0.0.37-24 → 0.0.37-25

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rn-shiki",
   "type": "module",
-  "version": "0.0.37-24",
+  "version": "0.0.37-25",
   "description": "Shiki syntax highlighter for React Native.",
   "author": "Ryan Skinner <hello@ryanskinner.com>",
   "license": "MIT",

package/src/components/syntax/SyntaxHighlighter.tsx

@@ -1,6 +1,5 @@
-import type { ColorValue, StyleProp, TextStyle, ViewStyle } from 'react-native'
+import type { ColorValue, StyleProp, TextStyle } from 'react-native'
 import type { SyntaxHighlighterProps } from 'src/types/shiki'
-import type { ReactStyle } from '../../utils/style-transformer'
 import React, { useMemo } from 'react'
 import { Platform, ScrollView, StyleSheet, Text, View } from 'react-native'
 import { useSyntaxHighlighter } from '../../hooks/useSyntaxHighlighter'
@@ -12,14 +11,30 @@ const monospaceFont = Platform.select({
   default: 'monospace',
 })
 
+interface TokenStyle extends Omit<TextStyle, 'color' | 'fontWeight'> {
+  color?: ColorValue
+  fontStyle?: 'normal' | 'italic'
+  fontWeight?: FontWeight
+  fontFamily?: string
+}
+
 interface Styles {
-  scrollView: ViewStyle
-  lineContainer: ViewStyle
-  token: TextStyle
-  container: ViewStyle
+  [key: string]: TokenStyle
+}
+
+type FontWeight = 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
+
+interface ThemeColors {
+  'editor.background'?: string
+  'editor.foreground'?: string
+}
+
+interface Theme {
+  colors?: ThemeColors
+  tokenColors?: any[]
 }
 
-const baseStyles = StyleSheet.create<Styles>({
+const baseStyles = StyleSheet.create({
   scrollView: {
     flex: 1,
     minHeight: 20,
@@ -27,29 +42,39 @@ const baseStyles = StyleSheet.create<Styles>({
   lineContainer: {
     flexDirection: 'row',
     flexWrap: 'wrap',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
   },
   token: {
     fontFamily: monospaceFont,
+    fontSize: 14,
   },
   container: {
     flex: 1,
   },
 })
 
-type FontWeight = 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
-
-interface TokenStyle extends Omit<TextStyle, 'color' | 'fontWeight'> {
-  color?: ColorValue
-  fontStyle?: 'normal' | 'italic'
-  fontWeight?: FontWeight
-  fontFamily?: string
-}
-
-const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, languageId, theme }) => {
+const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({
+  text,
+  language,
+  languageId,
+  theme,
+  fontSize = 14,
+}) => {
   const stylesheet = useMemo(() => {
-    const styles = getRNStylesFromShikiStyle(theme as ReactStyle)
-    return StyleSheet.create(styles)
-  }, [theme])
+    const styles = getRNStylesFromShikiStyle(theme as Theme)
+    return StyleSheet.create<Styles>({
+      ...styles,
+      editor: {
+        backgroundColor: (theme as Theme).colors?.['editor.background'] || '#1e1e1e',
+      },
+      token: {
+        ...baseStyles.token,
+        fontSize,
+        color: (theme as Theme).colors?.['editor.foreground'] || '#d4d4d4',
+      },
+    })
+  }, [theme, fontSize])
 
   const { tokens } = useSyntaxHighlighter({
     text,
@@ -59,19 +84,17 @@ const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, l
   })
 
   const renderToken = (token: any, index: number, lineIndex: number) => {
-    const styles: StyleProp<TokenStyle>[] = [baseStyles.token]
-
-    if (stylesheet.base) {
-      styles.push(stylesheet.base as unknown as TokenStyle)
-    }
+    const styles: StyleProp<TokenStyle>[] = [stylesheet.token]
 
+    // Add token-specific styles from stylesheet based on scope
     const tokenScopes = Array.isArray(token.scope) ? token.scope : [token.scope]
     tokenScopes.forEach((scope: string) => {
       if (stylesheet[scope]) {
-        styles.push(stylesheet[scope] as unknown as TokenStyle)
+        styles.push(stylesheet[scope])
       }
     })
 
+    // Add token-specific styles from the token itself
     const tokenStyles: TokenStyle = {}
     if (token.color) {
       tokenStyles.color = token.color
@@ -87,10 +110,10 @@ const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, l
       styles.push(tokenStyles)
     }
 
-    const combinedStyles = StyleSheet.flatten(styles)
+    const finalStyle = StyleSheet.flatten(styles)
 
     return (
-      <Text key={`${lineIndex}-${index}`} style={combinedStyles}>
+      <Text key={`${lineIndex}-${index}`} style={finalStyle}>
         {token.content.replace(/ /g, '\u00A0')}
       </Text>
     )
@@ -103,10 +126,13 @@ const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, l
   )
 
   return (
-    <ScrollView horizontal showsHorizontalScrollIndicator={Platform.OS !== 'web'} style={[baseStyles.scrollView, stylesheet.base as unknown as TokenStyle]}>
-      <View style={baseStyles.container} onStartShouldSetResponder={() => true}>
-        {tokens.map((line, index) => renderLine(line, index))}
-      </View>
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={Platform.OS !== 'web'}
+      style={[baseStyles.scrollView, stylesheet.editor]}
+      contentContainerStyle={baseStyles.container}
+    >
+      {tokens.map((line, index) => renderLine(line, index))}
     </ScrollView>
   )
 }