bugfix: fix list break with marker (#3177) (#3178)

* bugfix: fix list break with marker (#3177)

Signed-off-by: aaccardo <hackardo@gmail.com>

* refactor: fix code smell

Signed-off-by: aaccardo <hackardo@gmail.com>

---------

Signed-off-by: aaccardo <hackardo@gmail.com>

packages/pdf/src/templates/shared/rich-text.tsx

@@ -60,6 +60,11 @@ const applyRtlDirectionRecursively = (node: ReactNode): ReactNode => {
 export const RichText = ({ children }: RichTextProps) => {
 	const { metadata, rtl } = useRender();
 	const rtlTextWrapStyle: Style | undefined = rtl ? { direction: "rtl", textAlign: "right" } : undefined;
+
+	const richListItemMarkerMargin: Style = {
+		marginLeft: rtl ? 4 : 0,
+		marginRight: rtl ? 0 : 4
+	};
 	const boldStyle = useTemplateStyle("bold");
 	const linkStyle = useTemplateStyle("link");
 	const richParagraphStyle = useTemplateStyle("richParagraph");
@@ -118,10 +123,11 @@ export const RichText = ({ children }: RichTextProps) => {
 					const contentItemStyles = itemStyles.map(stripRichTextVerticalMargins);
 
 					const markerNode = (
-						<PdfText key="marker" style={composeStyles(richListItemMarkerStyle)}>
+						<PdfText key="marker" style={composeStyles(richListItemMarkerStyle, richListItemMarkerMargin)}>
 							{marker}
 						</PdfText>
 					);
+
 					// Same BiDi-injection trick as the <p> renderer — see applyRtlDirectionRecursively.
 					const contentNode = rtl ? (
 						<PdfText
@@ -147,7 +153,10 @@ export const RichText = ({ children }: RichTextProps) => {
 								safeTextStyle,
 							)}
 						>
-							{children}
+							<View style={{ flexDirection: "row", alignItems: "flex-start" }}>
+								{markerNode}
+								{children}
+							</View>
 						</View>
 					);
 
@@ -162,7 +171,7 @@ export const RichText = ({ children }: RichTextProps) => {
 								getRichTextEdgeTrimStyle(element),
 							)}
 						>
-							{rtl ? [contentNode, markerNode] : [markerNode, contentNode]}
+							{rtl ? [contentNode, markerNode] : contentNode}
 						</View>
 					);
 				},