Merge pull request #42599 from Expensify/revert-41731-useMarkdownStyl…

…es-excludeStyles-implementation

[CP staging] Revert "add possibility of excluding styles in useMarkdownStyles"

(cherry picked from commit 96b42a7)

src/components/Composer/index.native.tsx

@@ -27,15 +27,14 @@ function Composer(
         // On Android the selection prop is required on the TextInput but this prop has issues on IOS
         selection,
         value,
-        isGroupPolicyReport = false,
         ...props
     }: ComposerProps,
     ref: ForwardedRef<TextInput>,
 ) {
     const textInput = useRef<AnimatedMarkdownTextInputRef | null>(null);
     const {isFocused, shouldResetFocus} = useResetComposerFocus(textInput);
     const theme = useTheme();
-    const markdownStyle = useMarkdownStyle(value, !isGroupPolicyReport ? ['mentionReport'] : []);
+    const markdownStyle = useMarkdownStyle(value);
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
 

src/components/Composer/index.tsx

@@ -70,14 +70,13 @@ function Composer(
         isReportActionCompose = false,
         isComposerFullSize = false,
         shouldContainScroll = false,
-        isGroupPolicyReport = false,
         ...props
     }: ComposerProps,
     ref: ForwardedRef<TextInput | HTMLInputElement>,
 ) {
     const theme = useTheme();
     const styles = useThemeStyles();
-    const markdownStyle = useMarkdownStyle(value, !isGroupPolicyReport ? ['mentionReport'] : []);
+    const markdownStyle = useMarkdownStyle(value);
     const StyleUtils = useStyleUtils();
     const textRef = useRef<HTMLElement & RNText>(null);
     const textInput = useRef<AnimatedMarkdownTextInputRef | null>(null);

src/components/Composer/types.ts

@@ -70,9 +70,6 @@ type ComposerProps = TextInputProps & {
 
     /** Should make the input only scroll inside the element avoid scroll out to parent */
     shouldContainScroll?: boolean;
-
-    /** Indicates whether the composer is in a group policy report. Used for disabling report mentioning style in markdown input */
-    isGroupPolicyReport?: boolean;
 };
 
 export type {TextSelection, ComposerProps};

src/hooks/useMarkdownStyle.ts

@@ -5,25 +5,12 @@ import FontUtils from '@styles/utils/FontUtils';
 import variables from '@styles/variables';
 import useTheme from './useTheme';
 
-function useMarkdownStyle(message: string | null = null, excludeStyles: Array<keyof MarkdownStyle> = []): MarkdownStyle {
+function useMarkdownStyle(message: string | null = null): MarkdownStyle {
     const theme = useTheme();
     const emojiFontSize = containsOnlyEmojis(message ?? '') ? variables.fontSizeOnlyEmojis : variables.fontSizeNormal;
 
-    // this map is used to reset the styles that are not needed - passing undefined value can break the native side
-    const nonStylingDefaultValues: Record<string, string | number> = useMemo(
+    const markdownStyle = useMemo(
         () => ({
-            color: theme.text,
-            backgroundColor: 'transparent',
-            marginLeft: 0,
-            paddingLeft: 0,
-            borderColor: 'transparent',
-            borderWidth: 0,
-        }),
-        [theme],
-    );
-
-    const markdownStyle = useMemo(() => {
-        const styling = {
             syntax: {
                 color: theme.syntax,
             },
@@ -66,21 +53,9 @@ function useMarkdownStyle(message: string | null = null, excludeStyles: Array<ke
                 color: theme.mentionText,
                 backgroundColor: theme.mentionBG,
             },
-        };
-
-        if (excludeStyles.length) {
-            excludeStyles.forEach((key) => {
-                const style: Record<string, unknown> = styling[key];
-                if (style) {
-                    Object.keys(style).forEach((styleKey) => {
-                        style[styleKey] = nonStylingDefaultValues[styleKey] ?? style[styleKey];
-                    });
-                }
-            });
-        }
-
-        return styling;
-    }, [theme, emojiFontSize, excludeStyles, nonStylingDefaultValues]);
+        }),
+        [theme, emojiFontSize],
+    );
 
     return markdownStyle;
 }

src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx

@@ -765,7 +765,6 @@ function ComposerWithSuggestions(
                     onLayout={onLayout}
                     onScroll={hideSuggestionMenu}
                     shouldContainScroll={Browser.isMobileSafari()}
-                    isGroupPolicyReport={isGroupPolicyReport}
                 />
             </View>