rn-shiki 0.0.34 → 0.0.36

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rn-shiki",
   "type": "module",
-  "version": "0.0.34",
+  "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,9 +1,38 @@
 import type { SyntaxHighlighterProps } from 'src/types/shiki'
 import React from 'react'
-import { Text, View } from 'react-native'
+import { Platform, ScrollView, StyleSheet, Text, View } from 'react-native'
 import { useSyntaxHighlighter } from '../../hooks/useSyntaxHighlighter'
+import SyntaxLine from './SyntaxLine'
 
-function SyntaxHighlighter({ text, language, languageId, theme }: SyntaxHighlighterProps) {
+const monospaceFont = Platform.select({
+  ios: 'Menlo',
+  android: 'monospace',
+  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,
     language,
@@ -13,43 +42,46 @@ function SyntaxHighlighter({ text, language, languageId, theme }: SyntaxHighligh
 
   if (error) {
     return (
-      <Text style={{ color: '#ff6b6b', fontFamily: 'monospace' }}>
+      <Text
+        style={[
+          styles.errorText,
+          {
+            fontFamily: monospaceFont,
+            fontSize,
+          },
+        ]}
+      >
         Error:
+        {' '}
         {error}
       </Text>
     )
   }
 
   if (isLoading) {
-    return <Text style={{ color: '#666666', fontFamily: 'monospace' }}>Loading...</Text>
+    return (
+      <Text
+        style={[
+          styles.loadingText,
+          {
+            fontFamily: monospaceFont,
+            fontSize,
+          },
+        ]}
+      >
+        Loading...
+      </Text>
+    )
   }
 
   return (
-    <View>
-      {tokens.map((line, lineIndex) => (
-        <View key={`line-${lineIndex}`} style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
-          {line.map((token, tokenIndex) => (
-            <Text
-              key={`${lineIndex}-${tokenIndex}`}
-              style={{
-                color: token.color || '#000000',
-                fontFamily: 'monospace',
-                fontStyle: token.fontStyle as unknown as 'normal' | 'italic',
-              }}
-            >
-              {token.content.replace(/ /g, '\u00A0')}
-            </Text>
-          ))}
-          <Text
-            style={{
-              fontFamily: 'monospace',
-            }}
-          >
-            {'\n'}
-          </Text>
-        </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,27 +1,61 @@
 import type { TokenType } from '../../types'
 import React from 'react'
-import { Text, View } from 'react-native'
+import { Platform, StyleSheet, Text, View } from 'react-native'
+
+const monospaceFont = Platform.select({
+  ios: 'Menlo',
+  android: 'monospace',
+  default: 'monospace',
+})
+
+const styles = StyleSheet.create({
+  lineContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  token: {
+    includeFontPadding: false,
+  },
+})
 
 interface SyntaxLineProps {
   line: TokenType[]
   fontSize?: number
 }
 
-function SyntaxLine({ line, fontSize }: SyntaxLineProps) {
+function SyntaxLine({ line, fontSize = 14 }: SyntaxLineProps) {
+  const lineHeight = fontSize * 1.5
+
   return (
-    <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+    <View
+      style={[
+        styles.lineContainer,
+        {
+          minHeight: lineHeight,
+        },
+      ]}
+    >
       {line.map((token, tokenIndex) => {
-        // Preserve whitespace
         const content = token.content.replace(/ /g, '\u00A0')
         return (
           <Text
-            key={`${content}-${tokenIndex}`}
-            style={{
-              color: token.color,
-              fontFamily: 'monospace',
-              fontSize,
-              fontStyle: token.fontStyle as 'normal' | 'italic',
-            }}
+            key={`${tokenIndex}-${content.slice(0, 8)}`}
+            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>

package/src/types/index.ts

@@ -1,6 +1,6 @@
 export interface TokenType {
   content: string
-  color: string
+  color?: string
   fontStyle?: string
   fontWeight?: string
 }

package/src/types/shiki.ts

@@ -16,4 +16,5 @@ export interface SyntaxHighlighterProps {
   language: LanguageInput
   languageId: string
   theme?: ThemeRegistrationAny
+  fontSize?: number
 }