Here is a code:
Problem:
Children is a text typed by user, for example:
22. Test1
44. Test2
66. Test3
Edit: Even here (while creating this question), when I tried to write ordered list, the preview automatically convert to own numbering from 1 – that’s way this is in single line.
The TextDisplay component returns:
- Test1
- Test2
- Test3
So component ignores my own numbering (22,44,66) and start counting from 1.
Question: How to keep numbering 22,44,66? Is it normal behaviour / default when we use ordered list? Can I do something to avoid overwriting numbering by user with default 1,2,3..
import React from 'react';
import ReactMarkdown from 'react-markdown';
import * as Styled from './TextDisplay.styles';
const allowedElements = ['br', 'p', 'em', 'strong', 'a', 'img', 'ul', 'ol', 'li', 'hr'];
type Props = {
children: string;
className?: string;
};
const TextDisplay = ({ children, className }: Props) => (
<Styled.TextDisplay className={className}>
<ReactMarkdown
allowedElements={allowedElements}
components={{
p: Styled.Paragraph,
strong: Styled.Strong,
em: Styled.Emphasis,
ul: Styled.List,
li: Styled.ListItem,
ol: Styled.OrderedList,
a: Styled.Link,
hr: Styled.HorizontalLine,
}}
>
{children}
</ReactMarkdown>
</Styled.TextDisplay>
);
export default TextDisplay;
const List = styled.ul`
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 20px;
`;
const OrderedList = styled(List).attrs({ as: 'ol' })`
list-style-type: decimal;
`;
const ListItem = styled.li`
display: list-item;
text-align: match-parent;
`;