Merge pull request #41731 from software-mansion-labs/useMarkdownStyle…

…s-excludeStyles-implementation

add possibility of excluding styles in useMarkdownStyles

src/components/Composer/index.native.tsx

@@ -27,14 +27,15 @@ 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);
+    const markdownStyle = useMarkdownStyle(value, !isGroupPolicyReport ? ['mentionReport'] : []);
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
 

src/components/Composer/index.tsx

@@ -70,13 +70,14 @@ 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);
+    const markdownStyle = useMarkdownStyle(value, !isGroupPolicyReport ? ['mentionReport'] : []);
     const StyleUtils = useStyleUtils();
     const textRef = useRef<HTMLElement & RNText>(null);
     const textInput = useRef<AnimatedMarkdownTextInputRef | null>(null);

src/components/Composer/types.ts

@@ -70,6 +70,9 @@ 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,12 +5,25 @@ import FontUtils from '@styles/utils/FontUtils';
 import variables from '@styles/variables';
 import useTheme from './useTheme';
 
-function useMarkdownStyle(message: string | null = null): MarkdownStyle {
+function useMarkdownStyle(message: string | null = null, excludeStyles: Array<keyof MarkdownStyle> = []): MarkdownStyle {
     const theme = useTheme();
     const emojiFontSize = containsOnlyEmojis(message ?? '') ? variables.fontSizeOnlyEmojis : variables.fontSizeNormal;
 
-    const markdownStyle = useMemo(
+    // 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(
         () => ({
+            color: theme.text,
+            backgroundColor: 'transparent',
+            marginLeft: 0,
+            paddingLeft: 0,
+            borderColor: 'transparent',
+            borderWidth: 0,
+        }),
+        [theme],
+    );
+
+    const markdownStyle = useMemo(() => {
+        const styling = {
             syntax: {
                 color: theme.syntax,
             },
@@ -53,9 +66,21 @@ function useMarkdownStyle(message: string | null = null): MarkdownStyle {
                 color: theme.mentionText,
                 backgroundColor: theme.mentionBG,
             },
-        }),
-        [theme, emojiFontSize],
-    );
+        };
+
+        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]);
 
     return markdownStyle;
 }

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

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