feat: add textProps support to all text components

Author: batuhanoztrk

example/src/App.tsx

@@ -10,6 +10,9 @@ export default function App() {
           data={data}
           showFallback={true}
           style={styles.editorJsContainer}
+          textProps={{
+            maxFontSizeMultiplier: 1.0,
+          }}
         />
       </ScrollView>
     </SafeAreaView>

package.json

@@ -37,6 +37,7 @@
     "!**/.*"
   ],
   "scripts": {
+    "postinstall": "patch-package",
     "example": "yarn workspace react-native-editorjs-viewer-example",
     "test": "jest",
     "typecheck": "tsc",
@@ -77,6 +78,7 @@
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.1",
     "jest": "^29.7.0",
+    "patch-package": "^8.0.0",
     "prettier": "^3.0.3",
     "react": "18.2.0",
     "react-native": "0.74.5",
@@ -188,7 +190,6 @@
     "html-entities": "^2.5.2",
     "react-native-code-highlighter": "^1.2.3",
     "react-native-render-html": "^6.3.4",
-    "react-native-syntax-highlighter": "^2.1.0",
     "react-syntax-highlighter": "^15.5.0"
   }
 }

patches/react-native-code-highlighter+1.2.3.patch

@@ -0,0 +1,10 @@
+diff --git a/node_modules/react-native-code-highlighter/src/lib/CodeHighlighter.tsx b/node_modules/react-native-code-highlighter/src/lib/CodeHighlighter.tsx
+index d034ada..42aaedf 100644
+--- a/node_modules/react-native-code-highlighter/src/lib/CodeHighlighter.tsx
++++ b/node_modules/react-native-code-highlighter/src/lib/CodeHighlighter.tsx
+@@ -1,4 +1,4 @@
+-import React, { type FunctionComponent, type ReactNode, useMemo } from "react";
++import { type FunctionComponent, type ReactNode, useMemo } from "react";
+ import {
+ 	ScrollView,
+ 	type ScrollViewProps,

src/components/checkList/checkListItem/index.tsx

@@ -24,6 +24,7 @@ export type ICheckListItemProps = {
   textStyle?: TextProps['style'];
   otherStyles?: IUseParseHtmlTags['styles'];
   checkmarkStyle?: ViewProps['style'];
+  textProps?: Omit<TextProps, 'style' | 'children'>;
 };
 
 const CheckListItem = ({
@@ -35,12 +36,14 @@ const CheckListItem = ({
   textStyle,
   otherStyles,
   checkmarkStyle,
+  textProps,
 }: ICheckListItemProps) => {
   const { parseHtmlTag, defaultTagList } = useParseHtmlTags({
     styles: {
       ...otherStyles,
       textStyle: textStyle,
     },
+    textProps,
   });
 
   const parsedText = useMemo(
@@ -57,7 +60,9 @@ const CheckListItem = ({
         uncheckedStyle={checkboxUncheckedStyle}
         checkmarkStyle={checkmarkStyle}
       />
-      <Text style={[styles.text, textStyle]}>{parsedText}</Text>
+      <Text {...textProps} style={[styles.text, textStyle]}>
+        {parsedText}
+      </Text>
     </View>
   );
 };

src/components/checkList/index.tsx

@@ -16,6 +16,7 @@ export type ICheckListProps = {
   checkboxUncheckedStyle?: ViewProps['style'];
   checkmarkStyle?: ViewProps['style'];
   otherStyles?: IUseParseHtmlTags['styles'];
+  textProps?: Omit<TextProps, 'style' | 'children'>;
 };
 
 const CheckList = ({
@@ -29,6 +30,7 @@ const CheckList = ({
   contentContainerStyle,
   checkmarkStyle,
   otherStyles,
+  textProps,
 }: ICheckListProps) => {
   return (
     <FlatList
@@ -44,6 +46,7 @@ const CheckList = ({
           textStyle={textStyle}
           otherStyles={otherStyles}
           checkmarkStyle={checkmarkStyle}
+          textProps={textProps}
         />
       )}
       keyExtractor={(_, index) => index.toString()}

src/components/code/index.tsx

@@ -1,8 +1,8 @@
-import { View, StyleSheet } from 'react-native';
+import type { TextProps, ViewProps } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import CodeHighlighter from 'react-native-code-highlighter';
-import { atomOneDarkReasonable } from 'react-syntax-highlighter/dist/esm/styles/hljs';
-import type { ViewProps, TextProps } from 'react-native';
 import { type CodeHighlighterProps } from 'react-native-code-highlighter/src/lib/CodeHighlighter';
+import { atomOneDarkReasonable } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 
 export type ICodeProps = {
   data: {

src/components/delimiter/index.tsx

@@ -11,14 +11,25 @@ export type IDelimiterProps = {
   data: Record<string, never>;
   containerStyle?: ViewProps['style'];
   textStyle?: TextProps['style'];
+  textProps?: Omit<TextProps, 'style' | 'children'>;
 };
 
-const Delimiter = ({ containerStyle, textStyle }: IDelimiterProps) => {
+const Delimiter = ({
+  containerStyle,
+  textStyle,
+  textProps,
+}: IDelimiterProps) => {
   return (
     <View aria-hidden style={[styles.container, containerStyle]}>
-      <Text style={[styles.delimiter, textStyle]}>{decode('&ast;')}</Text>
-      <Text style={[styles.delimiter, textStyle]}>{decode('&ast;')}</Text>
-      <Text style={[styles.delimiter, textStyle]}>{decode('&ast;')}</Text>
+      <Text {...textProps} style={[styles.delimiter, textStyle]}>
+        {decode('&ast;')}
+      </Text>
+      <Text {...textProps} style={[styles.delimiter, textStyle]}>
+        {decode('&ast;')}
+      </Text>
+      <Text {...textProps} style={[styles.delimiter, textStyle]}>
+        {decode('&ast;')}
+      </Text>
     </View>
   );
 };

src/components/fallback/index.tsx

@@ -10,12 +10,18 @@ export type IFallbackProps = {
   blockType: string;
   containerStyle?: ViewProps['style'];
   textStyle?: TextProps['style'];
+  textProps?: Omit<TextProps, 'style' | 'children'>;
 };
 
-const Fallback = ({ blockType, containerStyle, textStyle }: IFallbackProps) => {
+const Fallback = ({
+  blockType,
+  containerStyle,
+  textStyle,
+  textProps,
+}: IFallbackProps) => {
   return (
     <View accessibilityRole="alert" style={[styles.container, containerStyle]}>
-      <Text accessible style={[styles.alertText, textStyle]}>
+      <Text accessible {...textProps} style={[styles.alertText, textStyle]}>
         Type &quot;{blockType}&quot; is yet not supported
       </Text>
     </View>

src/components/header/index.tsx

@@ -10,9 +10,10 @@ export type IHeaderProps = {
   };
   style?: (level: 1 | 2 | 3 | 4 | 5 | 6) => TextProps['style'];
   otherStyles?: (level: 1 | 2 | 3 | 4 | 5 | 6) => IUseParseHtmlTags['styles'];
+  textProps?: Omit<TextProps, 'style' | 'children'>;
 };
 
-const Header = ({ data, style, otherStyles }: IHeaderProps) => {
+const Header = ({ data, style, otherStyles, textProps }: IHeaderProps) => {
   const headingStyleByLevel = useMemo(
     () => styles[`h${data.level}`],
     [data.level]
@@ -23,6 +24,7 @@ const Header = ({ data, style, otherStyles }: IHeaderProps) => {
       ...otherStyles?.(data.level),
       textStyle: style?.(data.level),
     },
+    textProps,
   });
 
   const parsedText = useMemo(
@@ -35,6 +37,7 @@ const Header = ({ data, style, otherStyles }: IHeaderProps) => {
       accessible
       accessibilityRole="header"
       allowFontScaling={true}
+      {...textProps}
       style={[styles.header, headingStyleByLevel, style?.(data.level)]}
     >
       {parsedText}

src/components/image/index.tsx

@@ -22,6 +22,7 @@ export type IImageProps = {
   imageStyle?: ImageProps['style'];
   textStyle?: TextProps['style'];
   otherStyles?: IUseParseHtmlTags['styles'];
+  textProps?: Omit<TextProps, 'style' | 'children'>;
 };
 
 const Image = ({
@@ -30,12 +31,14 @@ const Image = ({
   textStyle,
   imageStyle,
   otherStyles,
+  textProps,
 }: IImageProps) => {
   const { parseHtmlTag, defaultTagList } = useParseHtmlTags({
     styles: {
       ...otherStyles,
       textStyle: textStyle,
     },
+    textProps,
   });
 
   const parsedText = useMemo(
@@ -55,7 +58,7 @@ const Image = ({
       />
 
       {parsedText && (
-        <Text aria-hidden style={[styles.caption, textStyle]}>
+        <Text aria-hidden {...textProps} style={[styles.caption, textStyle]}>
           {parsedText}
         </Text>
       )}