Skip to content

Commit 050e09b

Browse files
jsamrjsamr
committed
docs: document new props to fix identified textual bugs
1 parent b9e3dba commit 050e09b

File tree

8 files changed

+165
-4
lines changed

8 files changed

+165
-4
lines changed

‎doc-tools/doc-pages/src/pages/PageContentTextual.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@ import preformattedConfig from './cards/preformattedConfig';
99
import fontSelectionArial from './cards/fontSelectionArial';
1010
import fontSelectionCourierNewConfig from './cards/fontSelectionCourierNewConfig';
1111
import fontSelectionSpaceMonoConfig from './cards/fontSelectionSpaceMonoConfig';
12+
import lineBreakBugConfig from './cards/lineBreakBugConfig';
13+
import lineBreakFixConfig from './cards/lineBreakFixConfig';
14+
import ghostLineOddityConfig from './cards/ghostLineOddityConfig';
15+
import ghostLineFixConfig from './cards/ghostLineFixConfig';
1216

1317
export default function PageContentTextual() {
1418
const {
@@ -147,6 +151,43 @@ export default function PageContentTextual() {
147151
standard.
148152
</Admonition>
149153
</Chapter>
154+
<Chapter title="Troubleshooting">
155+
<Section title="Line Breaks">
156+
<Paragraph>
157+
Line breaks work seemlessly with the <RefHtmlElement name="br" />{' '}
158+
element. There is a known bug though in the Foundry release, where
159+
line breaks closing an inline formatting context will be printed
160+
while they should be ignored. Below is an example for illustration
161+
purposes:
162+
</Paragraph>
163+
<RenderHtmlCard {...lineBreakBugConfig} />
164+
<Paragraph>
165+
Hopefully, the bug has been identified and since version 6.1.1 there
166+
is a workaround. You just need to pass{' '}
167+
<RefRenderHtmlProp name="enableExperimentalBRCollapsing" /> prop:
168+
</Paragraph>
169+
<RenderHtmlCard {...lineBreakFixConfig} />
170+
</Section>
171+
<Section title="Empty Tags">
172+
<Paragraph>
173+
React Native has a weird behavior whereby empty{' '}
174+
<RefRNSymbol name="Text" /> elements span vertically on iOS and
175+
Android.{' '}
176+
<Hyperlink url="https://github.com/facebook/react-native/issues/32062">
177+
I called this "ghost lines"
178+
</Hyperlink>
179+
. For example:
180+
</Paragraph>
181+
<RenderHtmlCard {...ghostLineOddityConfig} />
182+
<Paragraph>
183+
Since version 6.1.1, a new prop,{' '}
184+
<RefRenderHtmlProp name="enableExperimentalGhostLinesPrevention" />,
185+
prevent this behavior from happening. It will also handle multiple
186+
ghost elements:
187+
</Paragraph>
188+
<RenderHtmlCard {...ghostLineFixConfig} />
189+
</Section>
190+
</Chapter>
150191
</Page>
151192
);
152193
}

‎doc-tools/doc-pages/src/pages/PageFAQ.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,28 @@ export default function PageFAQ() {
133133
.
134134
</Paragraph>
135135
</Section>
136+
<Section title="Line breaks (<br>) seem to take up too much vertical space">
137+
<Paragraph>
138+
This is a known bug, but hopefully we have the{' '}
139+
<RefRenderHtmlProp name="enableExperimentalBRCollapsing" /> prop to
140+
fix it. See{' '}
141+
<RefDoc target="textual" fragment="troubleshooting">
142+
Textual | Troubleshooting | Line Breaks
143+
</RefDoc>
144+
.
145+
</Paragraph>
146+
</Section>
147+
<Section title="Isolated empty textual tags take up vertical space">
148+
<Paragraph>
149+
This is another known bug, but hopefully we have the{' '}
150+
<RefRenderHtmlProp name="enableExperimentalGhostLinesPrevention" />{' '}
151+
prop to fix it. See{' '}
152+
<RefDoc target="textual" fragment="troubleshooting">
153+
Textual | Troubleshooting | Empty Tags
154+
</RefDoc>
155+
.
156+
</Paragraph>
157+
</Section>
136158
<Section title="Content after custom tags is not displayed or displayed inside instead of below?">
137159
<Paragraph>
138160
That would often happen in the HTML markup when your custom tags is

‎doc-tools/doc-pages/src/pages/cards/ghostLineFixConfig.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { UIRenderHtmlCardProps } from '../../toolkit/toolkit-types';
2+
3+
const html = `<p style="background-color: yellow">
4+
<span></span>
5+
<span></span>
6+
</p>
7+
`;
8+
9+
const ghostLineFixConfig: UIRenderHtmlCardProps = {
10+
title: 'Ghost lines fix',
11+
caption:
12+
'enableExperimentalGhostLinePrevention prop will attempt to prevent this odd behavior, including with multiple empty tags and whitespaces.',
13+
props: {
14+
source: {
15+
html
16+
},
17+
enableExperimentalGhostLinesPrevention: true
18+
},
19+
preferHtmlSrc: true
20+
};
21+
22+
export default ghostLineFixConfig;

‎doc-tools/doc-pages/src/pages/cards/ghostLineOddityConfig.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { UIRenderHtmlCardProps } from '../../toolkit/toolkit-types';
2+
3+
const html = `<p style="background-color: yellow">
4+
<span></span>
5+
</p>
6+
`;
7+
8+
const ghostLineOddityConfig: UIRenderHtmlCardProps = {
9+
title: 'Ghost lines in React Native',
10+
caption:
11+
'The span element is rendered as an empty Text, but it takes vertical space, approximately 20dpi, independent of font size and line height.',
12+
props: {
13+
source: {
14+
html
15+
}
16+
},
17+
preferHtmlSrc: true
18+
};
19+
20+
export default ghostLineOddityConfig;

‎doc-tools/doc-pages/src/pages/cards/lineBreakBugConfig.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { UIRenderHtmlCardProps } from '../../toolkit/toolkit-types';
2+
3+
const html = `<p style="background-color: yellow">
4+
A line with a line break closing
5+
an inline formatting context.<br>
6+
</p>
7+
`;
8+
9+
const lineBreakBugConfig: UIRenderHtmlCardProps = {
10+
title: 'Line break bug in v6',
11+
caption:
12+
'A line break closing an inline formatting context should not be printed according to WHATWG HTML standard. Notice that there is an extraneous new line at the end of the sentence.',
13+
props: {
14+
source: {
15+
html
16+
}
17+
},
18+
preferHtmlSrc: true
19+
};
20+
21+
export default lineBreakBugConfig;

‎doc-tools/doc-pages/src/pages/cards/lineBreakFixConfig.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { UIRenderHtmlCardProps } from '../../toolkit/toolkit-types';
2+
3+
const html = `<p style="background-color: yellow">
4+
A line with a line break closing
5+
an inline formatting context.<br>
6+
</p>
7+
`;
8+
9+
const lineBreakFixConfig: UIRenderHtmlCardProps = {
10+
title: 'A fix to the line break bug',
11+
caption:
12+
'enableExperimentalBRCollapsing prop prevents this bug from happening',
13+
props: {
14+
source: {
15+
html
16+
},
17+
enableExperimentalBRCollapsing: true
18+
},
19+
preferHtmlSrc: true
20+
};
21+
22+
export default lineBreakFixConfig;

‎packages/render-html/src/TPhrasingRenderer.ts‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { TPhrasing } from '@native-html/transient-render-engine';
2+
import { TNode, TPhrasing } from '@native-html/transient-render-engine';
33
import { useTNodeChildrenRenderer } from './context/TChildrenRendererContext';
44
import { TDefaultRenderer } from './shared-types';
55
import { TNodeSubRendererProps } from './internal-types';
@@ -29,6 +29,13 @@ function InnerTPhrasingRenderer(props: TNodeSubRendererProps<TPhrasing>) {
2929
return React.createElement(Renderer, assembledProps);
3030
}
3131

32+
function isGhostTNode(tnode: TNode) {
33+
return (
34+
(tnode.type === 'text' && (tnode.data === '' || tnode.data === ' ')) ||
35+
tnode.type === 'empty'
36+
);
37+
}
38+
3239
export default function TPhrasingRenderer(
3340
props: TNodeSubRendererProps<TPhrasing>
3441
) {
@@ -44,5 +51,12 @@ export default function TPhrasingRenderer(
4451
tnode: props.tnode
4552
});
4653
}
54+
if (
55+
props.sharedProps.enableExperimentalGhostLinesPrevention &&
56+
props.tnode.tagName == null &&
57+
props.tnode.children.every(isGhostTNode)
58+
) {
59+
return null;
60+
}
4761
return React.createElement(InnerTPhrasingRenderer, props);
4862
}

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -397,9 +397,8 @@ export interface RenderHTMLSharedProps {
397397
* the renderer take those React Native oddities into account.
398398
* See also this ticket: https://git.io/JErwX
399399
*
400-
* @remarks It might not work when `bypassAnonymousTPhrasingNodes` is set to
401-
* `false`. Also note that this is an experimental feature, thus subject to
402-
* behavioral instability.
400+
* @remarks This is an experimental feature, thus subject to behavioral
401+
* instability.
403402
*
404403
* @defaultValue false
405404
*/

0 commit comments

Comments
 (0)