rn-shiki 0.0.37-21 → 0.0.37-23

package/package.json

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

package/src/components/syntax/SyntaxHighlighter.tsx

@@ -1,3 +1,4 @@
+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'
@@ -11,24 +12,49 @@ const monospaceFont = Platform.select({
   default: 'monospace',
 })
 
-const styles = StyleSheet.create({
+interface TokenStyle extends Omit<TextStyle, 'color'> {
+  color?: ColorValue
+  fontFamily?: string
+}
+
+interface ThemeStyles {
+  token: TokenStyle
+  [key: string]: TokenStyle
+}
+
+const baseStyles = StyleSheet.create({
   scrollView: {
     flex: 1,
     minHeight: 20,
+    backgroundColor: '#24292e', // GitHub Dark default background
   },
   lineContainer: {
     flexDirection: 'row',
     flexWrap: 'wrap',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+  token: {
+    fontFamily: monospaceFont,
+    fontSize: 14,
+    color: '#e1e4e8', // GitHub Dark default text color
+  },
+  container: {
+    flex: 1,
   },
 })
 
-const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, languageId, theme }) => {
-  console.log('theme:', theme)
-  const stylesheet = useMemo(() => {
-    const styles = getRNStylesFromShikiStyle(theme as ReactStyle)
-    console.log('Generated stylesheet:', styles)
-    return styles
-  }, [theme])
+const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, languageId, theme, fontSize = 14 }) => {
+  const styles = useMemo(() => {
+    const themeStyles = getRNStylesFromShikiStyle(theme as ReactStyle)
+    return StyleSheet.create<ThemeStyles>({
+      ...themeStyles,
+      token: {
+        ...baseStyles.token,
+        fontSize,
+      },
+    })
+  }, [theme, fontSize])
 
   const { tokens } = useSyntaxHighlighter({
     text,
@@ -38,41 +64,46 @@ const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, l
   })
 
   const renderToken = (token: any, index: number, lineIndex: number) => {
-    // Ensure to collect all styles associated with the token's scopes
+    // Start with the base token style
+    const tokenStyles: StyleProp<TokenStyle>[] = [styles.token]
+
+    // Add token-specific styles from stylesheet based on scope
     const tokenScopes = Array.isArray(token.scope) ? token.scope : [token.scope]
-    const tokenStylesArray = tokenScopes.map((scope: string) => stylesheet[scope] || {})
-    const combinedStyles = StyleSheet.flatten([
-      ...tokenStylesArray,
-      {
-        fontFamily: monospaceFont,
-        ...(token.color && { color: token.color }),
-        ...(token.fontStyle === 'italic' && stylesheet.italic),
-        ...(token.fontWeight === 'bold' && stylesheet.bold),
-      },
-    ])
+    tokenScopes.forEach((scope: string) => {
+      if (styles[scope]) {
+        tokenStyles.push(styles[scope])
+      }
+    })
 
-    console.log(`Rendering token: ${token.content}, styles:`, combinedStyles)
+    // Add token-specific styles from the token itself
+    if (token.color) {
+      tokenStyles.push({ color: token.color })
+    }
+    if (token.fontStyle === 'italic') {
+      tokenStyles.push({ fontStyle: 'italic' })
+    }
+    if (token.fontWeight === 'bold') {
+      tokenStyles.push({ fontWeight: 'bold' })
+    }
+
+    const finalStyle = StyleSheet.flatten(tokenStyles)
 
     return (
-      <Text key={`${lineIndex}-${index}`} style={combinedStyles}>
+      <Text key={`${lineIndex}-${index}`} style={finalStyle}>
         {token.content.replace(/ /g, '\u00A0')}
       </Text>
     )
   }
 
-  // In the renderLine and renderToken flow
-  const renderLine = (line: any[], lineIndex: number) => {
-    console.log(`Rendering line ${lineIndex}:`, line)
-    return (
-      <View key={lineIndex} style={styles.lineContainer}>
-        {line.map((token, tokenIndex) => renderToken(token, tokenIndex, lineIndex))}
-      </View>
-    )
-  }
+  const renderLine = (line: any[], lineIndex: number) => (
+    <View key={lineIndex} style={baseStyles.lineContainer}>
+      {line.map((token, tokenIndex) => renderToken(token, tokenIndex, lineIndex))}
+    </View>
+  )
 
   return (
-    <ScrollView horizontal showsHorizontalScrollIndicator={Platform.OS !== 'web'} style={styles.scrollView}>
-      <View onStartShouldSetResponder={() => true}>{tokens.map((line, index) => renderLine(line, index))}</View>
+    <ScrollView horizontal showsHorizontalScrollIndicator={Platform.OS !== 'web'} style={baseStyles.scrollView} contentContainerStyle={baseStyles.container}>
+      {tokens.map((line, index) => renderLine(line, index))}
     </ScrollView>
   )
 }