rn-shiki 0.0.35 → 0.0.36

package/package.json

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

package/src/components/syntax/SyntaxHighlighter.tsx

@@ -1,6 +1,6 @@
 import type { SyntaxHighlighterProps } from 'src/types/shiki'
 import React from 'react'
-import { Platform, Text, View } from 'react-native'
+import { Platform, ScrollView, StyleSheet, Text, View } from 'react-native'
 import { useSyntaxHighlighter } from '../../hooks/useSyntaxHighlighter'
 import SyntaxLine from './SyntaxLine'
 
@@ -10,6 +10,28 @@ const monospaceFont = Platform.select({
   default: 'monospace',
 })
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    minHeight: 20,
+  },
+  scrollContent: {
+    flexGrow: 1,
+    padding: 8,
+  },
+  contentContainer: {
+    minWidth: '100%',
+  },
+  errorText: {
+    padding: 8,
+    color: '#ff6b6b',
+  },
+  loadingText: {
+    padding: 8,
+    color: '#666666',
+  },
+})
+
 function SyntaxHighlighter({ text, language, languageId, theme, fontSize = 14 }: SyntaxHighlighterProps & { fontSize?: number }) {
   const { tokens, error, isLoading } = useSyntaxHighlighter({
     text,
@@ -21,12 +43,13 @@ function SyntaxHighlighter({ text, language, languageId, theme, fontSize = 14 }:
   if (error) {
     return (
       <Text
-        style={{
-          color: '#ff6b6b',
-          fontFamily: monospaceFont,
-          fontSize,
-          padding: 4,
-        }}
+        style={[
+          styles.errorText,
+          {
+            fontFamily: monospaceFont,
+            fontSize,
+          },
+        ]}
       >
         Error:
         {' '}
@@ -38,12 +61,13 @@ function SyntaxHighlighter({ text, language, languageId, theme, fontSize = 14 }:
   if (isLoading) {
     return (
       <Text
-        style={{
-          color: '#666666',
-          fontFamily: monospaceFont,
-          fontSize,
-          padding: 4,
-        }}
+        style={[
+          styles.loadingText,
+          {
+            fontFamily: monospaceFont,
+            fontSize,
+          },
+        ]}
       >
         Loading...
       </Text>
@@ -51,19 +75,13 @@ function SyntaxHighlighter({ text, language, languageId, theme, fontSize = 14 }:
   }
 
   return (
-    <View style={{ flex: 1 }}>
-      {tokens.map((line, lineIndex) => (
-        <View
-          key={`line-${lineIndex}`}
-          style={{
-            minHeight: fontSize * 1.5, // Ensure consistent line height
-            paddingVertical: 2,
-          }}
-        >
-          <SyntaxLine line={line} fontSize={fontSize} />
-        </View>
-      ))}
-    </View>
+    <ScrollView horizontal showsHorizontalScrollIndicator={Platform.OS !== 'web'} style={styles.container} contentContainerStyle={styles.scrollContent}>
+      <View style={styles.contentContainer} onStartShouldSetResponder={() => true}>
+        {tokens.map((line, lineIndex) => (
+          <SyntaxLine key={`line-${lineIndex}`} line={line} fontSize={fontSize} />
+        ))}
+      </View>
+    </ScrollView>
   )
 }
 

package/src/components/syntax/SyntaxLine.tsx

@@ -1,6 +1,6 @@
 import type { TokenType } from '../../types'
 import React from 'react'
-import { Platform, Text, View } from 'react-native'
+import { Platform, StyleSheet, Text, View } from 'react-native'
 
 const monospaceFont = Platform.select({
   ios: 'Menlo',
@@ -8,56 +8,59 @@ const monospaceFont = Platform.select({
   default: 'monospace',
 })
 
+const styles = StyleSheet.create({
+  lineContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  token: {
+    includeFontPadding: false,
+  },
+})
+
 interface SyntaxLineProps {
   line: TokenType[]
   fontSize?: number
 }
 
 function SyntaxLine({ line, fontSize = 14 }: SyntaxLineProps) {
+  const lineHeight = fontSize * 1.5
+
   return (
     <View
-      style={{
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        minHeight: fontSize * 1.5, // Match parent container
-      }}
+      style={[
+        styles.lineContainer,
+        {
+          minHeight: lineHeight,
+        },
+      ]}
     >
       {line.map((token, tokenIndex) => {
         const content = token.content.replace(/ /g, '\u00A0')
         return (
           <Text
             key={`${tokenIndex}-${content.slice(0, 8)}`}
-            style={{
-              color: token.color || '#FFFFFF',
-              fontFamily: monospaceFont,
-              fontSize,
-              fontStyle: token.fontStyle as 'normal' | 'italic',
-              fontWeight: token.fontWeight as 'normal' | 'bold',
-              includeFontPadding: false,
-              textAlignVertical: 'center',
-              lineHeight: fontSize * 1.5,
-              ...(Platform.OS === 'ios'
-                ? {
-                    paddingTop: 2, // Fine-tune iOS vertical alignment
-                  }
-                : {}),
-            }}
+            style={[
+              styles.token,
+              {
+                color: token.color || '#FFFFFF',
+                fontFamily: monospaceFont,
+                fontSize,
+                fontStyle: token.fontStyle as 'normal' | 'italic',
+                fontWeight: token.fontWeight as 'normal' | 'bold',
+                lineHeight,
+                ...(Platform.OS === 'ios'
+                  ? {
+                      paddingTop: 1,
+                    }
+                  : {}),
+              },
+            ]}
           >
             {content}
           </Text>
         )
       })}
-      <Text
-        style={{
-          fontFamily: monospaceFont,
-          fontSize,
-          color: 'transparent',
-          lineHeight: fontSize * 1.5,
-          height: fontSize * 1.5,
-        }}
-      >
-        {'\n'}
-      </Text>
     </View>
   )
 }