feat: new enableExperimentalBRCollapsing prop to prevent extraneous spaces

fix #516

Author: jsamr

packages/render-html/src/RenderHTMLConfigProvider.tsx

@@ -26,6 +26,7 @@ export const renderHTMLConfigPropTypes: RenderHTMLConfigPropTypes = {
   bypassAnonymousTPhrasingNodes: PropTypes.bool,
   defaultTextProps: PropTypes.object,
   defaultViewProps: PropTypes.object,
+  enableExperimentalBRCollapsing: PropTypes.bool,
   enableExperimentalGhostLinesPrevention: PropTypes.bool,
   enableExperimentalMarginCollapsing: PropTypes.bool,
   remoteErrorView: PropTypes.func,

packages/render-html/src/__tests__/component.render-html.test.tsx

@@ -96,17 +96,29 @@ describe('RenderHTML', () => {
       );
       await findByText('\u200B');
     });
-    it('should use internal text renderer for <br> tags', async () => {
-      const { findByText } = render(
+    it('should render <br> tags to line returns when followed by text', () => {
+      const { queryByText } = render(
         <RenderHTML
           source={{
-            html: '<br>'
+            html: '<br><span>Two</span>'
           }}
           debug={false}
           contentWidth={0}
         />
       );
-      await findByText('\n');
+      expect(queryByText('\n')).toBeDefined();
+    });
+    it('should render <br> tags to line returns when the tag closes an inline formatting context', () => {
+      const { queryByText } = render(
+        <RenderHTML
+          source={{
+            html: 'Two<br><div></div>'
+          }}
+          debug={false}
+          contentWidth={0}
+        />
+      );
+      expect(queryByText('\n')).toBeDefined();
     });
     it('should invoke renderersProps.a.onPress on <a> press', async () => {
       const onPress = jest.fn();
@@ -670,4 +682,32 @@ describe('RenderHTML', () => {
       expect(image.props.source.headers).toBe(headers);
     });
   });
+  describe('regarding enableExperimentalBRCollapsing', () => {
+    it('should render <br> tags to line returns when followed by text', () => {
+      const { queryByText } = render(
+        <RenderHTML
+          source={{
+            html: '<br><span>Two</span>'
+          }}
+          debug={false}
+          contentWidth={0}
+          enableExperimentalBRCollapsing
+        />
+      );
+      expect(queryByText('\n')).toBeDefined();
+    });
+    it('should render <br> tags to empty text when the tag closes an inline formatting context', () => {
+      const { queryByText } = render(
+        <RenderHTML
+          source={{
+            html: 'Two<br><div></div>'
+          }}
+          debug={false}
+          contentWidth={0}
+          enableExperimentalBRCollapsing
+        />
+      );
+      expect(queryByText('\n')).toBeNull();
+    });
+  });
 });

packages/render-html/src/context/defaultSharedProps.ts

@@ -20,6 +20,7 @@ const defaultSharedProps: Required<RenderHTMLSharedProps> = {
     allowFontScaling: true
   },
   defaultViewProps: {},
+  enableExperimentalBRCollapsing: false,
   enableExperimentalGhostLinesPrevention: false,
   enableExperimentalMarginCollapsing: false,
   computeEmbeddedMaxWidth: (contentWidth) => contentWidth,

packages/render-html/src/renderers/BRRenderer.tsx

@@ -2,10 +2,21 @@ import React from 'react';
 import { Text } from 'react-native';
 import { InternalTextContentRenderer } from '../render/render-types';
 
-const emptyProps = {};
+const emptyProps = {
+  testID: 'br'
+};
 
-const BRRenderer: InternalTextContentRenderer = function BRRenderer() {
-  return React.createElement(Text, emptyProps, '\n');
+const BRRenderer: InternalTextContentRenderer = function BRRenderer({
+  renderIndex,
+  renderLength,
+  sharedProps
+}) {
+  // If it is the last child and BR collapsing is enabled, render nothing to
+  // prevent inserting an undesired space and follow HTML specs.
+  const shouldCollapse =
+    sharedProps.enableExperimentalBRCollapsing &&
+    renderIndex === renderLength - 1;
+  return React.createElement(Text, emptyProps, shouldCollapse ? '' : '\n');
 };
 
 BRRenderer.isNativeInternalTextRenderer = true;

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

@@ -363,6 +363,27 @@ export interface RenderHTMLSharedProps {
    */
   defaultWebViewProps?: any;
 
+  /**
+   * Follow closely the HTML standard and ignore `<br>` tags closing an
+   * inline formatting context.
+   *
+   * @example
+   *
+   * ```html
+   * <p>
+   *  Hello<br />
+   * </p>
+   * ```
+   *
+   * When this flag is set to `true`, one line is printed instead of two on
+   * native platforms, which is the HTML-compliant behavior.
+   *
+   * @defaultValue false
+   *
+   * @remarks Recommended value is `true` on non-web platforms.
+   */
+  enableExperimentalBRCollapsing?: boolean;
+
   /**
    * React Native doesn't handle lines like we would expect on a web browser.
    * For example: