fix: don't render bullets in ordered list

Author: war-in

src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx

@@ -191,10 +191,6 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim
                 contentModel: HTMLContentModel.block,
                 mixedUAStyles: {marginVertical: 12},
             }),
-            li: HTMLElementModel.fromCustomModel({
-                tagName: 'li',
-                contentModel: HTMLContentModel.block,
-            }),
             'sparkles-icon': HTMLElementModel.fromCustomModel({
                 tagName: 'sparkles-icon',
                 contentModel: HTMLContentModel.mixed,

src/components/HTMLEngineProvider/HTMLRenderers/BulletItemRenderer.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import {View} from 'react-native';
-import type {CustomRendererProps, TBlock} from 'react-native-render-html';
+import type {TNode} from 'react-native-render-html';
 import {TNodeChildrenRenderer} from 'react-native-render-html';
 import Text from '@components/Text';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 
-function BulletItemRenderer({tnode}: CustomRendererProps<TBlock>) {
+function BulletItemRenderer({tnode}: {tnode: TNode}) {
     const styles = useThemeStyles();
     const theme = useTheme();
 

src/components/HTMLEngineProvider/HTMLRenderers/ULRenderer.tsx

@@ -1,17 +1,37 @@
 import React from 'react';
 import {View} from 'react-native';
 import type {CustomRendererProps, TBlock} from 'react-native-render-html';
-import {TNodeChildrenRenderer} from 'react-native-render-html';
+import {TNodeRenderer} from 'react-native-render-html';
+import BulletItemRenderer from './BulletItemRenderer';
 
 /**
  * Bypasses the library's internal ULRenderer (which wraps children in MarkedListItem)
- * and renders ul as a plain block container — matching how bullet-list works.
- * The actual bullet markers are drawn by the li renderer (BulletItemRenderer).
+ * and renders <ul> as a plain block container that draws bullet markers around each
+ * direct <li> child — matching how <bullet-list>/<bullet-item> render. <li> is left
+ * unregistered globally so that <ol><li> still uses the library's default numeric markers.
  */
 function ULRenderer({tnode, style}: CustomRendererProps<TBlock>) {
     return (
         <View style={[style, {gap: 8}]}>
-            <TNodeChildrenRenderer tnode={tnode} />
+            {tnode.children.map((child, index) => {
+                const key = `${child.tagName ?? 'node'}-${index}`;
+                if (child.tagName === 'li') {
+                    return (
+                        <BulletItemRenderer
+                            key={key}
+                            tnode={child}
+                        />
+                    );
+                }
+                return (
+                    <TNodeRenderer
+                        key={key}
+                        tnode={child}
+                        renderIndex={index}
+                        renderLength={tnode.children.length}
+                    />
+                );
+            })}
         </View>
     );
 }

src/components/HTMLEngineProvider/HTMLRenderers/index.ts

@@ -31,7 +31,6 @@ const HTMLEngineProviderComponentList: CustomTagRendererRecord = {
     a: AnchorRenderer,
     code: CodeRenderer,
     img: ImageRenderer,
-    li: BulletItemRenderer,
     ul: ULRenderer,
     video: VideoRenderer,
 

src/components/RenderHTML.tsx

@@ -59,7 +59,6 @@ function RenderHTML({html: htmlParam, onLinkPress, isSelectable}: RenderHTMLProp
         /* eslint-disable @typescript-eslint/naming-convention */
         'bullet-item': BulletItemRenderer,
         'sparkles-icon': SparklesIconRenderer,
-        li: BulletItemRenderer,
         ul: ULRenderer,
     };
 

tests/unit/BulletListRendererTest.tsx

@@ -22,6 +22,7 @@ jest.mock('react-native-render-html', () => {
             return ReactModule.createElement(MockView);
         },
         TNodeChildrenRenderer: ({tnode}: {tnode?: {mockText?: string}}) => ReactModule.createElement(MockText, null, tnode?.mockText ?? ''),
+        TNodeRenderer: ({tnode}: {tnode?: {mockText?: string}}) => ReactModule.createElement(MockText, null, tnode?.mockText ?? ''),
     };
 });
 
@@ -33,28 +34,48 @@ jest.mock('@libs/Parser', () => ({
 }));
 
 const buildTNode = (text = '') => ({mockText: text}) as unknown as CustomRendererProps<TBlock>['tnode'];
+const buildULTNode = (children: Array<{tagName: string; text: string}>) =>
+    ({
+        children: children.map((child) => ({tagName: child.tagName, mockText: child.text})),
+    }) as unknown as CustomRendererProps<TBlock>['tnode'];
 
 describe('Bullet list rendering', () => {
     beforeEach(() => {
         capturedSource.html = undefined;
     });
 
     describe('ULRenderer', () => {
-        it('renders its children', () => {
+        it('wraps each <li> child with a bullet marker', () => {
             render(
                 // @ts-expect-error — only the props read by the renderer are needed for this test
                 <ULRenderer
-                    tnode={buildTNode('child content')}
+                    tnode={buildULTNode([
+                        {tagName: 'li', text: 'One'},
+                        {tagName: 'li', text: 'Two'},
+                    ])}
                     style={{}}
                 />,
             );
-            expect(screen.getByText('child content')).toBeTruthy();
+            expect(screen.getAllByText(CONST.DOT_SEPARATOR)).toHaveLength(2);
+            expect(screen.getByText('One')).toBeTruthy();
+            expect(screen.getByText('Two')).toBeTruthy();
+        });
+
+        it('renders non-<li> children with the default node renderer', () => {
+            render(
+                // @ts-expect-error — only the props read by the renderer are needed for this test
+                <ULRenderer
+                    tnode={buildULTNode([{tagName: 'span', text: 'stray child'}])}
+                    style={{}}
+                />,
+            );
+            expect(screen.queryByText(CONST.DOT_SEPARATOR)).toBeNull();
+            expect(screen.getByText('stray child')).toBeTruthy();
         });
     });
 
     describe('BulletItemRenderer (used for both <li> and <bullet-item>)', () => {
         it('renders a bullet marker next to the item content', () => {
-            // @ts-expect-error — only the props read by the renderer are needed for this test
             render(<BulletItemRenderer tnode={buildTNode('First item')} />);
             expect(screen.getByText(CONST.DOT_SEPARATOR)).toBeTruthy();
             expect(screen.getByText('First item')).toBeTruthy();