Add OL renderer

src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx

@@ -191,6 +191,11 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim
                 contentModel: HTMLContentModel.block,
                 mixedUAStyles: styles.mv3,
             }),
+            ol: HTMLElementModel.fromCustomModel({
+                tagName: 'ol',
+                contentModel: HTMLContentModel.block,
+                mixedUAStyles: styles.mv3,
+            }),
             'sparkles-icon': HTMLElementModel.fromCustomModel({
                 tagName: 'sparkles-icon',
                 contentModel: HTMLContentModel.mixed,

src/components/HTMLEngineProvider/HTMLRenderers/NumberedItemRenderer.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import {View} from 'react-native';
+import type {TNode} from 'react-native-render-html';
+import {TNodeChildrenRenderer} from 'react-native-render-html';
+import Text from '@components/Text';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+type NumberedItemRendererProps = {tnode: TNode; index: number};
+
+function NumberedItemRenderer({tnode, index}: NumberedItemRendererProps) {
+    const styles = useThemeStyles();
+
+    return (
+        <View style={[styles.flexRow, styles.w100]}>
+            <Text style={styles.numberedListItemMarker}>{`${index}.`}</Text>
+            <View style={styles.flex1}>
+                <TNodeChildrenRenderer tnode={tnode} />
+            </View>
+        </View>
+    );
+}
+
+export default NumberedItemRenderer;

src/components/HTMLEngineProvider/HTMLRenderers/OLRenderer.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import {View} from 'react-native';
+import type {CustomRendererProps, TBlock} from 'react-native-render-html';
+import {TNodeRenderer} from 'react-native-render-html';
+import useThemeStyles from '@hooks/useThemeStyles';
+import NumberedItemRenderer from './NumberedItemRenderer';
+
+function buildLiIndices(children: CustomRendererProps<TBlock>['tnode']['children']): Map<number, number> {
+    const map = new Map<number, number>();
+    let counter = 0;
+    for (const [i, child] of children.entries()) {
+        if (child.tagName === 'li') {
+            counter += 1;
+            map.set(i, counter);
+        }
+    }
+    return map;
+}
+
+function OLRenderer({tnode, style}: CustomRendererProps<TBlock>) {
+    const styles = useThemeStyles();
+    const liIndices = buildLiIndices(tnode.children);
+
+    return (
+        <View style={[style, styles.gap2]}>
+            {tnode.children.map((child, index) => {
+                const key = `${child.tagName ?? 'node'}-${index}`;
+                const liIndex = liIndices.get(index);
+                if (liIndex !== undefined) {
+                    return (
+                        <NumberedItemRenderer
+                            key={key}
+                            tnode={child}
+                            index={liIndex}
+                        />
+                    );
+                }
+                return (
+                    <TNodeRenderer
+                        key={key}
+                        tnode={child}
+                        renderIndex={index}
+                        renderLength={tnode.children.length}
+                    />
+                );
+            })}
+        </View>
+    );
+}
+
+export default OLRenderer;

src/components/HTMLEngineProvider/HTMLRenderers/ULRenderer.tsx

@@ -8,8 +8,7 @@ import BulletItemRenderer from './BulletItemRenderer';
 /**
  * Bypasses the library's internal ULRenderer (which wraps children in MarkedListItem)
  * 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.
+ * direct <li> child — matching how <bullet-list>/<bullet-item> render.
  */
 function ULRenderer({tnode, style}: CustomRendererProps<TBlock>) {
     const styles = useThemeStyles();

src/components/HTMLEngineProvider/HTMLRenderers/index.ts

@@ -13,6 +13,7 @@ import MentionHereRenderer from './MentionHereRenderer';
 import MentionReportRenderer from './MentionReportRenderer';
 import MentionUserRenderer from './MentionUserRenderer';
 import NextStepEmailRenderer from './NextStepEmailRenderer';
+import OLRenderer from './OLRenderer';
 import PreRenderer from './PreRenderer';
 import RBRRenderer from './RBRRenderer';
 import ShortMentionRenderer from './ShortMentionRenderer';
@@ -31,6 +32,7 @@ const HTMLEngineProviderComponentList: CustomTagRendererRecord = {
     a: AnchorRenderer,
     code: CodeRenderer,
     img: ImageRenderer,
+    ol: OLRenderer,
     ul: ULRenderer,
     video: VideoRenderer,
 

src/components/RenderHTML.tsx

@@ -5,6 +5,7 @@ import useHasTextAncestor from '@hooks/useHasTextAncestor';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import Parser from '@libs/Parser';
 import BulletItemRenderer from './HTMLEngineProvider/HTMLRenderers/BulletItemRenderer';
+import OLRenderer from './HTMLEngineProvider/HTMLRenderers/OLRenderer';
 import SparklesIconRenderer from './HTMLEngineProvider/HTMLRenderers/SparklesIconRenderer';
 import ULRenderer from './HTMLEngineProvider/HTMLRenderers/ULRenderer';
 
@@ -14,8 +15,8 @@ type LinkPressHandler = NonNullable<RenderersProps['a']>['onPress'];
 const RE_BRACKET_ESCAPE = /&amp;#9[13];/g;
 // Matches consecutive duplicate <emoji> or </emoji> tags, keeping only the outermost one.
 const RE_EMOJI_OPEN_OR_CLOSE = /(<emoji[^>]*>)(?:<emoji[^>]*>)+|(<\/emoji[^>]*>)(?:<\/emoji[^>]*>)+/g;
-// Strips orphaned <br/> tags inside <ul> that would render as extra empty bullets.
-const RE_BR_CLEANUP = /<br\s*\/?>\s*(<\/ul>)|(<\/li>)\s*<br\s*\/?>\s*(?=<(?:li|\/ul)>)/gi;
+// Strips one or more orphaned <br/> tags inside <ul> and <ol> that would render as extra empty items.
+const RE_BR_CLEANUP = /(?:\s*<br\s*\/?>)+\s*(<\/(?:ul|ol)>)|(<\/li>)(?:\s*<br\s*\/?>)+\s*(?=<(?:li|\/(?:ul|ol))>)/gi;
 
 type RenderHTMLProps = {
     /** HTML string to render */
@@ -46,7 +47,7 @@ function RenderHTML({html: htmlParam, onLinkPress, isSelectable}: RenderHTMLProp
                 .replaceAll(RE_BRACKET_ESCAPE, (m) => (m.at(7) === '1' ? '[' : ']'))
                 // Remove double <emoji> tag if exists and keep the outermost tag (always the original tag).
                 .replaceAll(RE_EMOJI_OPEN_OR_CLOSE, '$1$2')
-                // Strip orphaned <br/> tags inside <ul> that would render as extra empty bullets
+                // Strip orphaned <br/> tags inside <ul> and <ol> that would render as extra empty items
                 .replaceAll(RE_BR_CLEANUP, '$1$2')
         );
     }, [htmlParam]);
@@ -63,6 +64,7 @@ function RenderHTML({html: htmlParam, onLinkPress, isSelectable}: RenderHTMLProp
         /* eslint-disable @typescript-eslint/naming-convention */
         'bullet-item': BulletItemRenderer,
         'sparkles-icon': SparklesIconRenderer,
+        ol: OLRenderer,
         ul: ULRenderer,
     };
 

src/styles/index.ts

@@ -324,6 +324,14 @@ const staticStyles = (theme: ThemeColors) =>
             fontStyle: FontUtils.fontFamily.platform.EXP_NEUE_ITALIC.fontStyle,
         },
 
+        numberedListItemMarker: {
+            fontSize: variables.fontSizeNormal,
+            lineHeight: variables.fontSizeNormalHeight,
+            minWidth: 32,
+            textAlign: 'right',
+            paddingHorizontal: 8,
+        },
+
         autoCompleteSuggestionContainer: {
             flexDirection: 'row',
             alignItems: 'center',

tests/unit/BulletListRendererTest.tsx

@@ -2,6 +2,8 @@ import {render, screen} from '@testing-library/react-native';
 import React from 'react';
 import type {CustomRendererProps, TBlock} from 'react-native-render-html';
 import BulletItemRenderer from '@components/HTMLEngineProvider/HTMLRenderers/BulletItemRenderer';
+import NumberedItemRenderer from '@components/HTMLEngineProvider/HTMLRenderers/NumberedItemRenderer';
+import OLRenderer from '@components/HTMLEngineProvider/HTMLRenderers/OLRenderer';
 import ULRenderer from '@components/HTMLEngineProvider/HTMLRenderers/ULRenderer';
 import RenderHTML from '@components/RenderHTML';
 import CONST from '@src/CONST';
@@ -82,6 +84,50 @@ describe('Bullet list rendering', () => {
         });
     });
 
+    describe('OLRenderer', () => {
+        it('wraps each <li> child with a numbered marker', () => {
+            render(
+                // @ts-expect-error — only the props read by the renderer are needed for this test
+                <OLRenderer
+                    tnode={buildULTNode([
+                        {tagName: 'li', text: 'First'},
+                        {tagName: 'li', text: 'Second'},
+                    ])}
+                    style={{}}
+                />,
+            );
+            expect(screen.getByText('1.')).toBeTruthy();
+            expect(screen.getByText('2.')).toBeTruthy();
+            expect(screen.getByText('First')).toBeTruthy();
+            expect(screen.getByText('Second')).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
+                <OLRenderer
+                    tnode={buildULTNode([{tagName: 'span', text: 'stray child'}])}
+                    style={{}}
+                />,
+            );
+            expect(screen.queryByText('1.')).toBeNull();
+            expect(screen.getByText('stray child')).toBeTruthy();
+        });
+    });
+
+    describe('NumberedItemRenderer', () => {
+        it('renders a numbered marker next to the item content', () => {
+            render(
+                <NumberedItemRenderer
+                    tnode={buildTNode('First item')}
+                    index={1}
+                />,
+            );
+            expect(screen.getByText('1.')).toBeTruthy();
+            expect(screen.getByText('First item')).toBeTruthy();
+        });
+    });
+
     describe('RenderHTML strips orphaned <br/> tags inside <ul>', () => {
         it('strips <br/> immediately before </ul>', () => {
             render(<RenderHTML html="<ul><li>One</li><li>Two</li><br/></ul>" />);
@@ -103,6 +149,16 @@ describe('Bullet list rendering', () => {
             expect(capturedSource.html).toBe('<ul><li>One</li><li>Two</li></ul>');
         });
 
+        it('strips multiple consecutive <br/> before </ul>', () => {
+            render(<RenderHTML html="<ul><li>One</li><br/><br/><br/></ul>" />);
+            expect(capturedSource.html).toBe('<ul><li>One</li></ul>');
+        });
+
+        it('strips multiple consecutive <br/> between </li> and <li>', () => {
+            render(<RenderHTML html="<ul><li>One</li><br/><br/><li>Two</li></ul>" />);
+            expect(capturedSource.html).toBe('<ul><li>One</li><li>Two</li></ul>');
+        });
+
         it('does not strip <br/> outside of <ul> lists', () => {
             render(<RenderHTML html="<p>line1<br/>line2</p>" />);
             expect(capturedSource.html).toBe('<p>line1<br/>line2</p>');
@@ -113,4 +169,41 @@ describe('Bullet list rendering', () => {
             expect(capturedSource.html).toBe('<ul><li>One<br/>still one</li><li>Two</li></ul>');
         });
     });
+
+    describe('RenderHTML strips orphaned <br/> tags inside <ol>', () => {
+        it('strips <br/> immediately before </ol>', () => {
+            render(<RenderHTML html="<ol><li>One</li><li>Two</li><br/></ol>" />);
+            expect(capturedSource.html).toBe('<ol><li>One</li><li>Two</li></ol>');
+        });
+
+        it('strips <br> (no slash) immediately before </ol>', () => {
+            render(<RenderHTML html="<ol><li>One</li><li>Two</li><br></ol>" />);
+            expect(capturedSource.html).toBe('<ol><li>One</li><li>Two</li></ol>');
+        });
+
+        it('strips <br/> appearing between </li> and the next <li> inside <ol>', () => {
+            render(<RenderHTML html="<ol><li>One</li><br/><li>Two</li></ol>" />);
+            expect(capturedSource.html).toBe('<ol><li>One</li><li>Two</li></ol>');
+        });
+
+        it('leaves a valid <ol>/<li> list untouched', () => {
+            render(<RenderHTML html="<ol><li>One</li><li>Two</li></ol>" />);
+            expect(capturedSource.html).toBe('<ol><li>One</li><li>Two</li></ol>');
+        });
+
+        it('strips multiple consecutive <br/> before </ol>', () => {
+            render(<RenderHTML html="<ol><li>One</li><br/><br/><br/></ol>" />);
+            expect(capturedSource.html).toBe('<ol><li>One</li></ol>');
+        });
+
+        it('strips multiple consecutive <br/> between </li> and <li> inside <ol>', () => {
+            render(<RenderHTML html="<ol><li>One</li><br/><br/><li>Two</li></ol>" />);
+            expect(capturedSource.html).toBe('<ol><li>One</li><li>Two</li></ol>');
+        });
+
+        it('preserves <br/> that lives inside <li> as an in-item line break', () => {
+            render(<RenderHTML html="<ol><li>One<br/>still one</li><li>Two</li></ol>" />);
+            expect(capturedSource.html).toBe('<ol><li>One<br/>still one</li><li>Two</li></ol>');
+        });
+    });
 });