refactor(header): enhance style function for levels

Author: batuhanoztrk

example/src/App.tsx

@@ -1,6 +1,6 @@
 import { StyleSheet, ScrollView, SafeAreaView } from 'react-native';
 import data from './data.json';
-import EditorJsViewer from 'react-native-editorjs-viewer';
+import EditorJsViewer from '@fintables/react-native-editorjs-viewer';
 
 export default function App() {
   return (

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fintables/react-native-editorjs-viewer",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "A React Native component for rendering Editor.js content, supporting various block types with customizable styling.",
   "source": "./src/index.tsx",
   "main": "./lib/commonjs/index.js",

src/components/header/index.tsx

@@ -8,8 +8,8 @@ export type IHeaderProps = {
     level: 1 | 2 | 3 | 4 | 5 | 6;
     text: string;
   };
-  style?: TextProps['style'];
-  otherStyles?: IUseParseHtmlTags['styles'];
+  style?: (level: 1 | 2 | 3 | 4 | 5 | 6) => TextProps['style'];
+  otherStyles?: (level: 1 | 2 | 3 | 4 | 5 | 6) => IUseParseHtmlTags['styles'];
 };
 
 const Header = ({ data, style, otherStyles }: IHeaderProps) => {
@@ -20,8 +20,8 @@ const Header = ({ data, style, otherStyles }: IHeaderProps) => {
 
   const { parseHtmlTag, defaultTagList } = useParseHtmlTags({
     styles: {
-      ...otherStyles,
-      textStyle: style,
+      ...otherStyles?.(data.level),
+      textStyle: style?.(data.level),
     },
   });
 
@@ -35,7 +35,7 @@ const Header = ({ data, style, otherStyles }: IHeaderProps) => {
       accessible
       accessibilityRole="header"
       allowFontScaling={true}
-      style={[styles.header, headingStyleByLevel, style]}
+      style={[styles.header, headingStyleByLevel, style?.(data.level)]}
     >
       {parsedText}
     </Text>

src/hooks/useComponentMap.tsx

@@ -95,49 +95,49 @@ function useComponentMap(
         return (
           <Header
             data={block.data}
-            style={[
+            style={(level) => [
               containerStyle,
               defaultStyles?.textStyle,
-              componentStyles?.header?.textStyle,
+              componentStyles?.header?.textStyle?.(level),
             ]}
-            otherStyles={{
+            otherStyles={(level) => ({
               boldTextStyle: [
                 defaultStyles?.textStyle,
-                componentStyles?.header?.textStyle,
+                componentStyles?.header?.textStyle?.(level),
                 defaultStyles?.boldTextStyle,
                 componentStyles?.header?.boldTextStyle,
               ],
               italicTextStyle: [
                 defaultStyles?.textStyle,
-                componentStyles?.header?.textStyle,
+                componentStyles?.header?.textStyle?.(level),
                 defaultStyles?.italicTextStyle,
                 componentStyles?.header?.italicTextStyle,
               ],
               underlineTextStyle: [
                 defaultStyles?.textStyle,
-                componentStyles?.header?.textStyle,
+                componentStyles?.header?.textStyle?.(level),
                 defaultStyles?.underlineTextStyle,
                 componentStyles?.header?.underlineTextStyle,
               ],
               codeTextStyle: [
                 defaultStyles?.textStyle,
-                componentStyles?.header?.textStyle,
+                componentStyles?.header?.textStyle?.(level),
                 defaultStyles?.codeTextStyle,
                 componentStyles?.header?.codeTextStyle,
               ],
               markTextStyle: [
                 defaultStyles?.textStyle,
-                componentStyles?.header?.textStyle,
+                componentStyles?.header?.textStyle?.(level),
                 defaultStyles?.markTextStyle,
                 componentStyles?.header?.markTextStyle,
               ],
               linkTextStyle: [
                 defaultStyles?.textStyle,
-                componentStyles?.header?.textStyle,
+                componentStyles?.header?.textStyle?.(level),
                 defaultStyles?.linkTextStyle,
                 componentStyles?.header?.linkTextStyle,
               ],
-            }}
+            })}
           />
         );
       },

src/types.ts

@@ -70,7 +70,9 @@ export type EditorJsViewerProps = {
   defaultStyles?: IUseParseHtmlTags['styles'];
   componentStyles?: {
     paragraph?: IUseParseHtmlTags['styles'];
-    header?: IUseParseHtmlTags['styles'];
+    header?: {
+      textStyle?: (level: 1 | 2 | 3 | 4 | 5 | 6) => TextProps['style'];
+    } & Omit<NonNullable<IUseParseHtmlTags['styles']>, 'textStyle'>;
     delimiter?: {
       containerStyle?: ViewProps['style'];
       textStyle?: TextProps['style'];

tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "rootDir": ".",
     "paths": {
-      "react-native-editorjs-viewer": ["./src/index"]
+      "@fintables/react-native-editorjs-viewer": ["./src/index"]
     },
     "allowUnreachableCode": false,
     "allowUnusedLabels": false,

yarn.lock

@@ -2374,6 +2374,40 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fintables/react-native-editorjs-viewer@workspace:.":
+  version: 0.0.0-use.local
+  resolution: "@fintables/react-native-editorjs-viewer@workspace:."
+  dependencies:
+    "@commitlint/config-conventional": ^17.0.2
+    "@evilmartians/lefthook": ^1.5.0
+    "@react-native/eslint-config": ^0.73.1
+    "@release-it/conventional-changelog": ^5.0.0
+    "@types/jest": ^29.5.5
+    "@types/react": ^18.2.44
+    "@types/react-syntax-highlighter": ^15.5.13
+    commitlint: ^17.0.2
+    del-cli: ^5.1.0
+    eslint: ^8.51.0
+    eslint-config-prettier: ^9.0.0
+    eslint-plugin-prettier: ^5.0.1
+    html-entities: ^2.5.2
+    jest: ^29.7.0
+    prettier: ^3.0.3
+    react: 18.2.0
+    react-native: 0.74.5
+    react-native-builder-bob: ^0.30.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
+    release-it: ^15.0.0
+    typescript: ^5.2.2
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  languageName: unknown
+  linkType: soft
+
 "@graphql-typed-document-node/core@npm:^3.1.0":
   version: 3.2.0
   resolution: "@graphql-typed-document-node/core@npm:3.2.0"
@@ -13007,40 +13041,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"react-native-editorjs-viewer@workspace:.":
-  version: 0.0.0-use.local
-  resolution: "react-native-editorjs-viewer@workspace:."
-  dependencies:
-    "@commitlint/config-conventional": ^17.0.2
-    "@evilmartians/lefthook": ^1.5.0
-    "@react-native/eslint-config": ^0.73.1
-    "@release-it/conventional-changelog": ^5.0.0
-    "@types/jest": ^29.5.5
-    "@types/react": ^18.2.44
-    "@types/react-syntax-highlighter": ^15.5.13
-    commitlint: ^17.0.2
-    del-cli: ^5.1.0
-    eslint: ^8.51.0
-    eslint-config-prettier: ^9.0.0
-    eslint-plugin-prettier: ^5.0.1
-    html-entities: ^2.5.2
-    jest: ^29.7.0
-    prettier: ^3.0.3
-    react: 18.2.0
-    react-native: 0.74.5
-    react-native-builder-bob: ^0.30.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
-    release-it: ^15.0.0
-    typescript: ^5.2.2
-  peerDependencies:
-    react: "*"
-    react-native: "*"
-  languageName: unknown
-  linkType: soft
-
 "react-native-render-html@npm:^6.3.4":
   version: 6.3.4
   resolution: "react-native-render-html@npm:6.3.4"