rn-shiki 0.0.34 → 0.0.35

package/package.json

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

package/src/components/syntax/SyntaxHighlighter.tsx

@@ -1,9 +1,16 @@
 import type { SyntaxHighlighterProps } from 'src/types/shiki'
 import React from 'react'
-import { Text, View } from 'react-native'
+import { Platform, 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',
+})
+
+function SyntaxHighlighter({ text, language, languageId, theme, fontSize = 14 }: SyntaxHighlighterProps & { fontSize?: number }) {
   const { tokens, error, isLoading } = useSyntaxHighlighter({
     text,
     language,
@@ -13,40 +20,47 @@ function SyntaxHighlighter({ text, language, languageId, theme }: SyntaxHighligh
 
   if (error) {
     return (
-      <Text style={{ color: '#ff6b6b', fontFamily: 'monospace' }}>
+      <Text
+        style={{
+          color: '#ff6b6b',
+          fontFamily: monospaceFont,
+          fontSize,
+          padding: 4,
+        }}
+      >
         Error:
+        {' '}
         {error}
       </Text>
     )
   }
 
   if (isLoading) {
-    return <Text style={{ color: '#666666', fontFamily: 'monospace' }}>Loading...</Text>
+    return (
+      <Text
+        style={{
+          color: '#666666',
+          fontFamily: monospaceFont,
+          fontSize,
+          padding: 4,
+        }}
+      >
+        Loading...
+      </Text>
+    )
   }
 
   return (
-    <View>
+    <View style={{ flex: 1 }}>
       {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
+          key={`line-${lineIndex}`}
+          style={{
+            minHeight: fontSize * 1.5, // Ensure consistent line height
+            paddingVertical: 2,
+          }}
+        >
+          <SyntaxLine line={line} fontSize={fontSize} />
         </View>
       ))}
     </View>

package/src/components/syntax/SyntaxLine.tsx

@@ -1,32 +1,63 @@
 import type { TokenType } from '../../types'
 import React from 'react'
-import { Text, View } from 'react-native'
+import { Platform, Text, View } from 'react-native'
+
+const monospaceFont = Platform.select({
+  ios: 'Menlo',
+  android: 'monospace',
+  default: 'monospace',
+})
 
 interface SyntaxLineProps {
   line: TokenType[]
   fontSize?: number
 }
 
-function SyntaxLine({ line, fontSize }: SyntaxLineProps) {
+function SyntaxLine({ line, fontSize = 14 }: SyntaxLineProps) {
   return (
-    <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+    <View
+      style={{
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        minHeight: fontSize * 1.5, // Match parent container
+      }}
+    >
       {line.map((token, tokenIndex) => {
-        // Preserve whitespace
         const content = token.content.replace(/ /g, '\u00A0')
         return (
           <Text
-            key={`${content}-${tokenIndex}`}
+            key={`${tokenIndex}-${content.slice(0, 8)}`}
             style={{
-              color: token.color,
-              fontFamily: 'monospace',
+              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
+                  }
+                : {}),
             }}
           >
             {content}
           </Text>
         )
       })}
+      <Text
+        style={{
+          fontFamily: monospaceFont,
+          fontSize,
+          color: 'transparent',
+          lineHeight: fontSize * 1.5,
+          height: fontSize * 1.5,
+        }}
+      >
+        {'\n'}
+      </Text>
     </View>
   )
 }

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
 }