diff --git a/packages/pdf/src/templates/shared/rich-text.tsx b/packages/pdf/src/templates/shared/rich-text.tsx index 29514e243..c305b2b5d 100644 --- a/packages/pdf/src/templates/shared/rich-text.tsx +++ b/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 = ( - + {marker} ); + // Same BiDi-injection trick as the

renderer — see applyRtlDirectionRecursively. const contentNode = rtl ? ( { safeTextStyle, )} > - {children} + + {markerNode} + {children} + ); @@ -162,7 +171,7 @@ export const RichText = ({ children }: RichTextProps) => { getRichTextEdgeTrimStyle(element), )} > - {rtl ? [contentNode, markerNode] : [markerNode, contentNode]} + {rtl ? [contentNode, markerNode] : contentNode} ); },