Skip to content

Commit f7e3115

Browse files
neil-marcellinineil-marcellini
authored
Merge pull request Expensify#59490 from Expensify/revert-59202-fix/58468-nested-markdown-not-applied
[CP Staging] Revert "Fix nested markdown isn't applied"
2 parents 4325900 + 836e4d9 commit f7e3115

File tree

7 files changed

+111
-24
lines changed

7 files changed

+111
-24
lines changed

‎src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import React, {useMemo} from 'react';
22
import type {TextProps} from 'react-native';
33
import {HTMLContentModel, HTMLElementModel, RenderHTMLConfigProvider, TRenderEngineProvider} from 'react-native-render-html';
4-
import type {TNode} from 'react-native-render-html';
54
import useThemeStyles from '@hooks/useThemeStyles';
65
import convertToLTR from '@libs/convertToLTR';
76
import FontUtils from '@styles/utils/FontUtils';
87
import type ChildrenProps from '@src/types/utils/ChildrenProps';
9-
import {computeEmbeddedMaxWidth, isChildOfTaskTitle} from './htmlEngineUtils';
8+
import * as HTMLEngineUtils from './htmlEngineUtils';
109
import htmlRenderers from './HTMLRenderers';
1110

1211
type BaseHTMLEngineProviderProps = ChildrenProps & {
@@ -80,17 +79,7 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim
8079
}),
8180
strong: HTMLElementModel.fromCustomModel({
8281
tagName: 'strong',
83-
getMixedUAStyles: (tnode) => (isChildOfTaskTitle(tnode as TNode) ? {} : styles.strong),
84-
contentModel: HTMLContentModel.textual,
85-
}),
86-
em: HTMLElementModel.fromCustomModel({
87-
tagName: 'em',
88-
getMixedUAStyles: (tnode) => (isChildOfTaskTitle(tnode as TNode) ? styles.taskTitleMenuItemItalic : styles.em),
89-
contentModel: HTMLContentModel.textual,
90-
}),
91-
h1: HTMLElementModel.fromCustomModel({
92-
tagName: 'h1',
93-
getMixedUAStyles: (tnode) => (isChildOfTaskTitle(tnode as TNode) ? {} : styles.h1),
82+
mixedUAStyles: {whiteSpace: 'pre'},
9483
contentModel: HTMLContentModel.textual,
9584
}),
9685
'mention-user': HTMLElementModel.fromCustomModel({tagName: 'mention-user', contentModel: HTMLContentModel.textual}),
@@ -137,10 +126,6 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim
137126
styles.onlyEmojisText,
138127
styles.onlyEmojisTextLineHeight,
139128
styles.taskTitleMenuItem,
140-
styles.taskTitleMenuItemItalic,
141-
styles.em,
142-
styles.strong,
143-
styles.h1,
144129
],
145130
);
146131
/* eslint-enable @typescript-eslint/naming-convention */
@@ -167,7 +152,7 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim
167152
defaultTextProps={defaultTextProps}
168153
defaultViewProps={defaultViewProps}
169154
renderers={htmlRenderers}
170-
computeEmbeddedMaxWidth={computeEmbeddedMaxWidth}
155+
computeEmbeddedMaxWidth={HTMLEngineUtils.computeEmbeddedMaxWidth}
171156
enableExperimentalBRCollapsing={enableExperimentalBRCollapsing}
172157
>
173158
{children}

‎src/components/HTMLEngineProvider/HTMLRenderers/EMRenderer.tsx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from 'react';
2+
import type {CustomRendererProps, TPhrasing, TText} from 'react-native-render-html';
3+
import {TNodeChildrenRenderer} from 'react-native-render-html';
4+
import * as HTMLEngineUtils from '@components/HTMLEngineProvider/htmlEngineUtils';
5+
import Text from '@components/Text';
6+
import useThemeStyles from '@hooks/useThemeStyles';
7+
8+
function EMRenderer({tnode}: CustomRendererProps<TText | TPhrasing>) {
9+
const styles = useThemeStyles();
10+
const isChildOfTaskTitle = HTMLEngineUtils.isChildOfTaskTitle(tnode);
11+
12+
return 'data' in tnode ? (
13+
<Text style={[styles.webViewStyles.baseFontStyle, styles.webViewStyles.tagStyles.em, isChildOfTaskTitle && styles.taskTitleMenuItemItalic]}>{tnode.data}</Text>
14+
) : (
15+
<TNodeChildrenRenderer
16+
tnode={tnode}
17+
renderChild={(props) => {
18+
return (
19+
<Text
20+
style={[styles.webViewStyles.baseFontStyle, styles.strong, isChildOfTaskTitle && styles.taskTitleMenuItem]}
21+
key={props.key}
22+
>
23+
{props.childElement}
24+
</Text>
25+
);
26+
}}
27+
/>
28+
);
29+
}
30+
31+
EMRenderer.displayName = 'EMRenderer';
32+
33+
export default EMRenderer;

‎src/components/HTMLEngineProvider/HTMLRenderers/HeadingRenderer.tsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react';
2+
import type {CustomRendererProps, TPhrasing, TText} from 'react-native-render-html';
3+
import {TNodeChildrenRenderer} from 'react-native-render-html';
4+
import * as HTMLEngineUtils from '@components/HTMLEngineProvider/htmlEngineUtils';
5+
import Text from '@components/Text';
6+
import useThemeStyles from '@hooks/useThemeStyles';
7+
8+
function HeadingRenderer({tnode}: CustomRendererProps<TText | TPhrasing>) {
9+
const styles = useThemeStyles();
10+
const isChildOfTaskTitle = HTMLEngineUtils.isChildOfTaskTitle(tnode);
11+
12+
return (
13+
<TNodeChildrenRenderer
14+
tnode={tnode}
15+
renderChild={(props) => {
16+
return (
17+
<Text
18+
style={[styles.webViewStyles.baseFontStyle, styles.h1, isChildOfTaskTitle && styles.taskTitleMenuItem]}
19+
key={props.key}
20+
>
21+
{props.childElement}
22+
</Text>
23+
);
24+
}}
25+
/>
26+
);
27+
}
28+
29+
HeadingRenderer.displayName = 'HeadingRenderer';
30+
31+
export default HeadingRenderer;

‎src/components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ function MentionReportRenderer({style, tnode, TDefaultRenderer, ...defaultRender
6060
style={
6161
isGroupPolicyReport && (!exactlyMatch || navigationRoute)
6262
? [styles.link, styleWithoutColor, StyleUtils.getMentionStyle(isCurrentRoomMention), {color: StyleUtils.getMentionTextColor(isCurrentRoomMention)}]
63-
: [flattenStyle]
63+
: []
6464
}
6565
suppressHighlighting
6666
onPress={

‎src/components/HTMLEngineProvider/HTMLRenderers/StrongRenderer.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react';
2+
import type {StyleProp, TextStyle} from 'react-native';
3+
import type {CustomRendererProps, TPhrasing, TText} from 'react-native-render-html';
4+
import * as HTMLEngineUtils from '@components/HTMLEngineProvider/htmlEngineUtils';
5+
import useThemeStyles from '@hooks/useThemeStyles';
6+
7+
function StrongRenderer({tnode, TDefaultRenderer, style, ...props}: CustomRendererProps<TText | TPhrasing>) {
8+
const styles = useThemeStyles();
9+
const isChildOfTaskTitle = HTMLEngineUtils.isChildOfTaskTitle(tnode);
10+
11+
return (
12+
<TDefaultRenderer
13+
// eslint-disable-next-line react/jsx-props-no-spreading
14+
{...props}
15+
tnode={tnode}
16+
style={[style as StyleProp<TextStyle>, isChildOfTaskTitle && styles.taskTitleMenuItem, {fontStyle: (style.fontStyle as TextStyle['fontStyle']) ?? 'normal'}]}
17+
/>
18+
);
19+
}
20+
21+
StrongRenderer.displayName = 'StrongRenderer';
22+
23+
export default StrongRenderer;

‎src/components/HTMLEngineProvider/HTMLRenderers/index.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,16 @@ import CodeRenderer from './CodeRenderer';
44
import DeletedActionRenderer from './DeletedActionRenderer';
55
import EditedRenderer from './EditedRenderer';
66
import EmojiRenderer from './EmojiRenderer';
7+
import EMRenderer from './EMRenderer';
8+
import HeadingRenderer from './HeadingRenderer';
79
import ImageRenderer from './ImageRenderer';
810
import MentionHereRenderer from './MentionHereRenderer';
911
import MentionReportRenderer from './MentionReportRenderer';
1012
import MentionUserRenderer from './MentionUserRenderer';
1113
import NextStepEmailRenderer from './NextStepEmailRenderer';
1214
import PreRenderer from './PreRenderer';
1315
import ShortMentionRenderer from './ShortMentionRenderer';
16+
import StrongRenderer from './StrongRenderer';
1417
import TaskTitleRenderer from './TaskTitleRenderer';
1518
import VideoRenderer from './VideoRenderer';
1619

@@ -23,6 +26,9 @@ const HTMLEngineProviderComponentList: CustomTagRendererRecord = {
2326
code: CodeRenderer,
2427
img: ImageRenderer,
2528
video: VideoRenderer,
29+
h1: HeadingRenderer,
30+
strong: StrongRenderer,
31+
em: EMRenderer,
2632

2733
// Custom tag renderers
2834
edited: EditedRenderer,

‎src/styles/index.ts

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,18 @@ const webViewStyles = (theme: ThemeColors) =>
150150
// styles from the renderer, just pass the "style" prop to the underlying
151151
// component.
152152
tagStyles: {
153+
em: {
154+
// We set fontFamily and fontStyle directly in order to avoid overriding fontWeight.
155+
fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_ITALIC.fontFamily,
156+
fontStyle: FontUtils.fontFamily.platform.EXP_NEUE_ITALIC.fontStyle,
157+
},
158+
159+
strong: {
160+
// We set fontFamily and fontWeight directly in order to avoid overriding fontStyle.
161+
fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD.fontFamily,
162+
fontWeight: FontUtils.fontFamily.platform.EXP_NEUE_BOLD.fontWeight,
163+
},
164+
153165
del: {
154166
textDecorationLine: 'line-through',
155167
textDecorationStyle: 'solid',
@@ -217,6 +229,8 @@ const webViewStyles = (theme: ThemeColors) =>
217229
marginBottom: 0,
218230
},
219231
h1: {
232+
fontSize: undefined,
233+
fontWeight: undefined,
220234
marginBottom: 8,
221235
},
222236
},
@@ -275,11 +289,6 @@ const styles = (theme: ThemeColors) =>
275289
fontWeight: FontUtils.fontFamily.platform.EXP_NEUE_BOLD.fontWeight,
276290
},
277291

278-
em: {
279-
fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_ITALIC.fontFamily,
280-
fontStyle: FontUtils.fontFamily.platform.EXP_NEUE_ITALIC.fontStyle,
281-
},
282-
283292
autoCompleteSuggestionContainer: {
284293
flexDirection: 'row',
285294
alignItems: 'center',

0 commit comments

Comments
 (0)