Make HTML renderers overridable

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@observation.org/react-native-components",
-  "version": "1.69.0",
+  "version": "1.70.0",
   "main": "src/index.ts",
   "repository": "git@github.com:observation/react-native-components.git",
   "author": "Observation.org",

src/components/RenderHtmlWrapper.tsx

@@ -10,7 +10,7 @@ import htmlStyle from '../styles/html'
 import textStyle from '../styles/text'
 import theme from '../styles/theme'
 
-export const imgRenderer = ({ tnode }: { tnode: TBlock }) => {
+const imgRenderer = ({ tnode }: { tnode: TBlock }) => {
   const { src, alt } = tnode.attributes
   Log.debug('RenderHtmlWrapper:imgRenderer', src, alt)
   if (!src) {
@@ -19,7 +19,7 @@ export const imgRenderer = ({ tnode }: { tnode: TBlock }) => {
   return <ContentImage key={src} alt={alt} src={src} />
 }
 
-export const olRenderer = ({ InternalRenderer, ...props }: CustomRendererProps<TBlock>) => (
+const olRenderer = ({ InternalRenderer, ...props }: CustomRendererProps<TBlock>) => (
   <InternalRenderer
     {...props}
     style={{
@@ -29,7 +29,7 @@ export const olRenderer = ({ InternalRenderer, ...props }: CustomRendererProps<T
   />
 )
 
-export const ulRenderer = ({ TNodeChildrenRenderer, ...props }: CustomRendererProps<TBlock>) => (
+const ulRenderer = ({ TNodeChildrenRenderer, ...props }: CustomRendererProps<TBlock>) => (
   <>
     {props.tnode.children.map((item, i) => (
       <View key={i} style={{ flexDirection: 'row' }}>
@@ -40,7 +40,7 @@ export const ulRenderer = ({ TNodeChildrenRenderer, ...props }: CustomRendererPr
   </>
 )
 
-const renderers = {
+const defaultRenderers = {
   img: imgRenderer,
   ol: olRenderer,
   ul: ulRenderer,
@@ -57,19 +57,26 @@ const systemFonts = [...defaultSystemFonts, 'Ubuntu']
 const RenderHtmlWrapper = ({
   contentWidth = Dimensions.get('window').width - 2 * theme.margin.common,
   renderersProps = defaultRenderersProps,
+  renderers: customRenderers = {},
   baseStyle = textStyle.body,
   ...props
-}: RenderHTMLProps) => (
-  <RenderHtml
-    contentWidth={contentWidth}
-    renderersProps={renderersProps}
-    renderers={renderers}
-    systemFonts={systemFonts}
-    baseStyle={baseStyle}
-    tagsStyles={htmlStyle}
-    enableExperimentalMarginCollapsing
-    {...props}
-  />
-)
+}: RenderHTMLProps) => {
+  const mergedRenderers = {
+    ...defaultRenderers,
+    ...customRenderers,
+  }
+  return (
+    <RenderHtml
+      contentWidth={contentWidth}
+      renderersProps={renderersProps}
+      renderers={mergedRenderers}
+      systemFonts={systemFonts}
+      baseStyle={baseStyle}
+      tagsStyles={htmlStyle}
+      enableExperimentalMarginCollapsing
+      {...props}
+    />
+  )
+}
 
 export default RenderHtmlWrapper

src/components/__tests__/RenderHtmlWrapper.test.tsx

@@ -20,6 +20,24 @@ describe('RenderHtmlWrapper', () => {
       })
     })
 
+    describe('Override renderer', () => {
+      test('Override ol', () => {
+        const html = '<ol>\n<li>Ein</li>\n<li>Zwei</li>\n<li>Drei</li>\n</ol>'
+        const renderers = { ol: () => <></> }
+        const { toJSON, queryByText } = render(<RenderHtmlWrapper source={{ html }} renderers={renderers} />)
+        expect(queryByText('Ein')).toBeFalsy()
+        expect(toJSON()).toMatchSnapshot()
+      })
+
+      test('Override ul does not affect ol', () => {
+        const html = '<ol>\n<li>Ein</li>\n<li>Zwei</li>\n<li>Drei</li>\n</ol>'
+        const renderers = { ul: () => <></> }
+        const { toJSON, queryByText } = render(<RenderHtmlWrapper source={{ html }} renderers={renderers} />)
+        expect(queryByText('Ein')).toBeTruthy()
+        expect(toJSON()).toMatchSnapshot()
+      })
+    })
+
     describe('Custom ordered list renderer', () => {
       test('Normal renderer', () => {
         const html = '<ol>\n<li>Ein</li>\n<li>Zwei</li>\n<li>Drei</li>\n</ol>'