rn-shiki 0.0.37-28 → 0.0.37-29

package/package.json

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

package/src/components/syntax/SyntaxHighlighter.tsx

@@ -1,5 +1,5 @@
 import type { ColorValue, StyleProp, TextStyle } from 'react-native'
-import type { ThemeInput, ThemeRegistration } from 'shiki'
+import type { ThemedToken, ThemeInput, ThemeRegistration } from 'shiki'
 import type { SyntaxHighlighterProps } from 'src/types/shiki'
 import React, { useMemo } from 'react'
 import { Platform, ScrollView, StyleSheet, Text, View } from 'react-native'
@@ -19,13 +19,8 @@ interface TokenStyle extends Omit<TextStyle, 'color' | 'fontWeight'> {
   fontFamily?: string
 }
 
-interface Styles {
-  [key: string]: TokenStyle
-}
-
 type FontWeight = 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
 
-// Helper function to extract theme registration from Shiki theme input
 function getThemeRegistration(theme: ThemeInput): ThemeRegistration {
   if ('default' in theme) {
     return theme.default
@@ -37,19 +32,27 @@ const baseStyles = StyleSheet.create({
   scrollView: {
     flex: 1,
     minHeight: 20,
+    backgroundColor: '#1e1e1e',
   },
   lineContainer: {
     flexDirection: 'row',
     flexWrap: 'wrap',
+    minWidth: '100%',
     paddingHorizontal: 16,
-    paddingVertical: 8,
+    paddingVertical: 4,
   },
   token: {
     fontFamily: monospaceFont,
     fontSize: 14,
+    color: '#d4d4d4',
   },
   container: {
-    flex: 1,
+    paddingVertical: 8,
+  },
+  line: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    width: '100%',
   },
 })
 
@@ -57,7 +60,8 @@ const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, l
   const stylesheet = useMemo(() => {
     const themeRegistration = getThemeRegistration(theme)
     const styles = getRNStylesFromShikiStyle(themeRegistration)
-    return StyleSheet.create<Styles>({
+
+    return StyleSheet.create({
       ...styles,
       editor: {
         backgroundColor: themeRegistration.colors?.['editor.background'] || '#1e1e1e',
@@ -77,51 +81,41 @@ const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, l
     theme,
   })
 
-  const renderToken = (token: any, index: number, lineIndex: number) => {
+  const renderToken = (token: ThemedToken, index: number) => {
     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])
-      }
-    })
-
-    // Add token-specific styles from the token itself
-    const tokenStyles: TokenStyle = {}
+    // Always apply the token color if it exists
     if (token.color) {
-      tokenStyles.color = token.color
-    }
-    if (token.fontStyle === 'italic') {
-      tokenStyles.fontStyle = 'italic'
-    }
-    if (token.fontWeight === 'bold') {
-      tokenStyles.fontWeight = 'bold'
+      styles.push({ color: token.color })
     }
 
-    if (Object.keys(tokenStyles).length > 0) {
-      styles.push(tokenStyles)
+    // Add font styles
+    if (token.fontStyle) {
+      styles.push({
+        // fontStyle: token.fontStyle.includes('italic') ? 'italic' : 'normal',
+        // fontWeight: token.fontStyle.includes('bold') ? 'bold' : 'normal',
+        fontStyle: token.fontStyle as unknown as 'normal' | 'italic',
+        fontWeight: (token.fontStyle as unknown as string).includes('bold') ? 'bold' : 'normal',
+      })
     }
 
-    const finalStyle = StyleSheet.flatten(styles)
-
     return (
-      <Text key={`${lineIndex}-${index}`} style={finalStyle}>
+      <Text key={index} style={styles}>
         {token.content.replace(/ /g, '\u00A0')}
       </Text>
     )
   }
 
-  const renderLine = (line: any[], lineIndex: number) => (
-    <View key={lineIndex} style={baseStyles.lineContainer}>
-      {line.map((token, tokenIndex) => renderToken(token, tokenIndex, lineIndex))}
+  const renderLine = (line: ThemedToken[], lineIndex: number) => (
+    <View key={lineIndex} style={baseStyles.line}>
+      {line.map((token, tokenIndex) => renderToken(token, tokenIndex))}
+      <Text>{'\n'}</Text>
     </View>
   )
 
   return (
     <ScrollView horizontal showsHorizontalScrollIndicator={Platform.OS !== 'web'} style={[baseStyles.scrollView, stylesheet.editor]} contentContainerStyle={baseStyles.container}>
-      {tokens.map((line, index) => renderLine(line, index))}
+      <View>{tokens.map((line, index) => renderLine(line, index))}</View>
     </ScrollView>
   )
 }

package/src/utils/style-transformer.ts

@@ -7,85 +7,12 @@ export interface HighlighterStyleSheet {
 
 export type ReactStyle = Record<string, TextStyle>
 
-function hexToRgb(hex: string): { r: number, g: number, b: number } | null {
-  // Remove # if present
-  hex = hex.replace(/^#/, '')
-
-  // Handle both 3 and 6 digit hex
-  if (hex.length === 3) {
-    hex = `${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`
-  }
-
-  const result = /^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
-  return result
-    ? {
-        r: Number.parseInt(result[1]!, 16),
-        g: Number.parseInt(result[2]!, 16),
-        b: Number.parseInt(result[3]!, 16),
-      }
-    : null
-}
-
 function normalizeColor(color: string | undefined): string {
   if (!color)
     return 'transparent'
-
-  // Handle hex colors
-  if (color.startsWith('#')) {
-    const rgb = hexToRgb(color)
-    if (rgb) {
-      return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`
-    }
-  }
-
   return color
 }
 
-export function convertTokenColorsToReactStyle(tokenColors: ThemeRegistration['tokenColors']): ReactStyle {
-  if (!tokenColors)
-    return {}
-
-  const styleMap: ReactStyle = {}
-
-  tokenColors.forEach((token) => {
-    if (!token.settings)
-      return
-
-    // Handle global theme settings
-    if (!token.scope) {
-      styleMap.default = {
-        color: normalizeColor(token.settings.foreground),
-        backgroundColor: normalizeColor(token.settings.background),
-      }
-      return
-    }
-
-    const scopes = Array.isArray(token.scope) ? token.scope : [token.scope]
-    const style: TextStyle = {}
-
-    if (token.settings.foreground) {
-      style.color = normalizeColor(token.settings.foreground)
-    }
-    if (token.settings.background) {
-      style.backgroundColor = normalizeColor(token.settings.background)
-    }
-    if (token.settings.fontStyle) {
-      if (token.settings.fontStyle.includes('italic')) {
-        style.fontStyle = 'italic'
-      }
-      if (token.settings.fontStyle.includes('bold')) {
-        style.fontWeight = 'bold'
-      }
-    }
-
-    scopes.forEach((scope) => {
-      styleMap[scope] = { ...(styleMap[scope] || {}), ...style }
-    })
-  })
-
-  return styleMap
-}
-
 export function getRNStylesFromShikiStyle(theme: ThemeRegistration): HighlighterStyleSheet {
   if (!theme)
     return {}
@@ -100,15 +27,35 @@ export function getRNStylesFromShikiStyle(theme: ThemeRegistration): Highlighter
       },
     }
 
-    // Process token colors
     if (theme.tokenColors) {
-      const tokenStyles = convertTokenColorsToReactStyle(theme.tokenColors)
-      Object.assign(styles, tokenStyles)
+      theme.tokenColors.forEach((token) => {
+        if (!token.settings)
+          return
+
+        const style: TextStyle = {}
+        if (token.settings.foreground) {
+          style.color = token.settings.foreground
+        }
+        if (token.settings.background) {
+          style.backgroundColor = token.settings.background
+        }
+        if (token.settings.fontStyle) {
+          style.fontStyle = token.settings.fontStyle.includes('italic') ? 'italic' : 'normal'
+          style.fontWeight = token.settings.fontStyle.includes('bold') ? 'bold' : 'normal'
+        }
+
+        const scopes = Array.isArray(token.scope) ? token.scope : [token.scope]
+        scopes.forEach((scope) => {
+          if (scope) {
+            styles[scope] = style
+          }
+        })
+      })
     }
 
     return styles
   }
-  catch {
+  catch (error) {
     return {
       editor: { backgroundColor: '#1e1e1e' },
       base: { color: '#d4d4d4' },