From 0954d8b380245be2372c18e5d70629dd14787fc9 Mon Sep 17 00:00:00 2001
From: "Jules Sam. Randolph" <jules.sam.randolph@gmail.com>
Date: Fri, 16 Apr 2021 13:45:04 -0300
Subject: [PATCH] feat: support experimental RTL mode for ol and ul elements

Set `enableExperimentalRtl` to `true` in props for the OL and UL element
renderers. When this value is true, and the `direction` CSS property is
set to `'rtl'`, **or** the `dir` attribute is set to `'rtl'` for this
element or one of its parent, the list marker will be flushed to the
right.
---
 packages/render-html/src/elements/ListElement.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/render-html/src/elements/ListElement.tsx b/packages/render-html/src/elements/ListElement.tsx
index deabba729..43bd7fedc 100644
--- a/packages/render-html/src/elements/ListElement.tsx
+++ b/packages/render-html/src/elements/ListElement.tsx
@@ -19,6 +19,15 @@ export interface ListElementProps<T extends 'ol' | 'ul'>
   listType: T;
   getListStyleTypeFromNestLevel: (nestLevel: number) => SupportedListStyleType;
   getStyleFromNestLevel?: (nestLevel: number) => ViewStyle | null;
+  /**
+   * If `true`:
+   * - lists markers will be flushed to the right when `I18nManager.isRtl` is `false`.
+   * - list markers prefixes and suffixes print order will be reversed.
+   *
+   * @remarks Beware that left and right padding of li elements *will not*
+   * be switched.
+   */
+  enableExperimentalRtl?: boolean;
 }
 
 function getStartIndex(tnode: TNode) {
@@ -88,14 +97,16 @@ export default function ListElement({
   getListStyleTypeFromNestLevel,
   getStyleFromNestLevel,
   markers,
+  enableExperimentalRtl = false,
   ...props
 }: ListElementProps<any>) {
   const nestLevel =
     listType === 'ol' ? markers.olNestLevel : markers.ulNestLevel;
   const TChildrenRenderer = useTChildrenRenderer();
   const rtl =
-    tnode.styles.nativeBlockFlow.direction === 'rtl' ||
-    markers.direction === 'rtl';
+    enableExperimentalRtl &&
+    (tnode.styles.nativeBlockFlow.direction === 'rtl' ||
+      markers.direction === 'rtl');
   const nestLevelStyle = getStyleFromNestLevel?.call(null, nestLevel);
   const selectedListType = getListStyleTypeFromNestLevel(nestLevel);
   const listStyleType =