refactor: only apply BR collapsing on non-web platforms

Author: jsamr

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

@@ -1,22 +1,44 @@
+import { TNode } from '@native-html/transient-render-engine';
 import React from 'react';
-import { Text } from 'react-native';
+import { Platform, Text, View } from 'react-native';
 import { InternalTextContentRenderer } from '../render/render-types';
 
 const emptyProps = {
   testID: 'br'
 };
 
+const isWeb = Platform.OS === 'web';
+
+function renderEmptyLineBreak(tnode: TNode) {
+  const lineHeight =
+    tnode.styles.nativeTextFlow.lineHeight ||
+    tnode.styles.nativeTextFlow.fontSize! * 1.4;
+  return <View style={{ height: lineHeight }} />;
+}
+
 const BRRenderer: InternalTextContentRenderer = function BRRenderer({
   renderIndex,
   renderLength,
-  sharedProps
+  sharedProps,
+  tnode
 }) {
-  // If it is the last child and BR collapsing is enabled, render nothing to
-  // prevent inserting an undesired space and follow HTML specs.
+  // If it is the last child and BR collapsing is enabled, render an empty
+  // string to prevent inserting an undesired space to follow HTML specs,
+  // unless the platform is web and it is also the first child.
+  //
+  // Note that we are taking advantage of the Ghost Line oddity in React
+  // Native, where an empty <Text /> element displays a line, since a
+  // line break opening **and** closing an inline formatting context
+  // should be printed as a one line-height item.
+  const isFirst = renderIndex === 0;
+  const isLast = renderIndex === renderLength - 1;
+  const isLonelyBreak = isFirst && isLast;
   const shouldCollapse =
     sharedProps.enableExperimentalBRCollapsing &&
-    renderIndex === renderLength - 1;
-  return React.createElement(Text, emptyProps, shouldCollapse ? '' : '\n');
+    (isFirst ? isLast && !isWeb : isLast);
+  return isLonelyBreak && shouldCollapse
+    ? renderEmptyLineBreak(tnode)
+    : React.createElement(Text, emptyProps, shouldCollapse ? '' : '\n');
 };
 
 BRRenderer.isNativeInternalTextRenderer = true;