feat: support renderersProps.(ol|ul).markerBoxStyle prop

Useful to add padding to the right of markers (list element prefixes).

Author: jsamr

packages/render-html/src/context/RenderersPropsProvider.tsx

@@ -39,7 +39,7 @@ export default function RenderersPropsProvider(
   }, [props.renderersProps, profile]);
   return React.createElement(
     RenderersPropsContext.Provider,
-    { value: mergedRenderersProps },
+    { value: mergedRenderersProps as Required<RenderersProps> },
     props.children
   );
 }

packages/render-html/src/elements/ListElement.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react-native/no-inline-styles */
 import { StyleSheet, View } from 'react-native';
 import React from 'react';
 import { TBlock, TNode } from '@native-html/transient-render-engine';
@@ -75,6 +74,7 @@ export default function ListElement({
   listType,
   style,
   getFallbackListStyleTypeFromNestLevel,
+  markerBoxStyle,
   enableExperimentalRtl = false,
   enableRemoveTopMarginIfNested = true,
   enableRemoveBottomMarginIfNested = true,
@@ -132,6 +132,7 @@ export default function ListElement({
     counterRenderer,
     startIndex,
     markerTextStyle,
+    markerBoxStyle,
     rtlLineReversed: rtl,
     rtlMarkerReversed: rtl,
     length: tnode.children.length,

packages/render-html/src/elements/ULElement.tsx

@@ -4,5 +4,8 @@ import ListElement, { ListElementProps } from './ListElement';
 export type ULElementProps = Omit<ListElementProps<'ul'>, 'listType'>;
 
 export default function ULElement(props: ULElementProps) {
-  return React.createElement(ListElement, { ...props, listType: 'ul' });
+  return React.createElement(ListElement, {
+    ...props,
+    listType: 'ul'
+  });
 }

packages/render-html/src/shared-types.ts

@@ -126,6 +126,17 @@ export interface ListElementConfig {
   getFallbackListStyleTypeFromNestLevel?: (
     nestLevel: number
   ) => DefaultSupportedListStyleType;
+  /**
+   * Customize the marker box appearance (the `View` containing the marker,
+   * e.g. the symbol prefixing list elements).
+   *
+   * @remarks This is useful to set some right padding or a different background for example.
+   *
+   * @warning **Do not**:
+   * - Use margin (since the width will match the `<ol>` / `<ul>` padding left)
+   * - Set width constraints (since the width will match the `<ol>` / `<ul>` padding left)
+   */
+  markerBoxStyle?: StyleProp<ViewStyle>;
 }
 
 /**