fix: Limit Custom CSS/JS Preview to 3 Lines (Closes #668)

LNReader · Sep 2, 2023 · 929b183 · 929b183
1 parent f53b0ea
commit 929b183
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 19 deletions.
diff --git a/src/screens/settings/SettingsReaderScreen/Settings/CustomCSSSettings.tsx b/src/screens/settings/SettingsReaderScreen/Settings/CustomCSSSettings.tsx
@@ -1,4 +1,4 @@
-import { StyleSheet, View, TextInput } from 'react-native';
+import { StyleSheet, View, Text } from 'react-native';
 import React, { useState } from 'react';
 
 import { Button, List } from '@components/index';
@@ -32,15 +32,9 @@ const CustomCSSSettings = () => {
         </List.SubHeader>
       </View>
       <View style={styles.customCSSContainer}>
-        <TextInput
-          style={[{ color: theme.onSurface }, styles.fontSizeL]}
-          value={customCSS}
-          onChangeText={text => setCustomCSS(text)}
-          placeholderTextColor={theme.onSurfaceVariant}
-          placeholder="Example: body {margin: 10px;}"
-          multiline={true}
-          editable={false}
-        />
+        <Text numberOfLines={3} style={{ color: theme.onSurface }}>
+          {customCSS || 'Example: body {margin: 10px;}'}
+        </Text>
         <View style={styles.customCSSButtons}>
           <Button
             onPress={cssModal.setTrue}

diff --git a/src/screens/settings/SettingsReaderScreen/Settings/CustomJSSettings.tsx b/src/screens/settings/SettingsReaderScreen/Settings/CustomJSSettings.tsx
@@ -1,4 +1,4 @@
-import { StyleSheet, TextInput, View } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 import React, { useState } from 'react';
 
 import { Button, List } from '@components/index';
@@ -37,14 +37,9 @@ const CustomJSSettings: React.FC<CustomJSSettingsProps> = ({
         </List.SubHeader>
       </View>
       <View style={styles.customJSContainer}>
-        <TextInput
-          style={[{ color: theme.onSurface }, styles.fontSizeL]}
-          value={customJS}
-          placeholderTextColor={theme.onSurfaceVariant}
-          placeholder="Example: document.getElementById('example');"
-          multiline={true}
-          editable={false}
-        />
+        <Text numberOfLines={3} style={{ color: theme.onSurface }}>
+          {customJS || "Example: document.getElementById('example');"}
+        </Text>
         <View style={styles.customJSButtons}>
           <Button
             onPress={jsModal.setTrue}