From 9556b714e4284600bb50e4d1e0c5014072dc5b0c Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Tue, 7 May 2024 13:32:10 +0200 Subject: [PATCH 1/8] implement excluding styling rules for useMarkdownStyle --- src/hooks/useMarkdownStyle.ts | 108 +++++++++++++++++++--------------- 1 file changed, 62 insertions(+), 46 deletions(-) diff --git a/src/hooks/useMarkdownStyle.ts b/src/hooks/useMarkdownStyle.ts index b1f430e232e4..d36b2ed9076b 100644 --- a/src/hooks/useMarkdownStyle.ts +++ b/src/hooks/useMarkdownStyle.ts @@ -5,56 +5,72 @@ 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 = []): MarkdownStyle { const theme = useTheme(); const emojiFontSize = containsOnlyEmojis(message ?? '') ? variables.fontSizeOnlyEmojis : variables.fontSizeNormal; const markdownStyle = useMemo( - () => ({ - syntax: { - color: theme.syntax, - }, - link: { - color: theme.link, - }, - h1: { - fontSize: variables.fontSizeLarge, - }, - emoji: { - fontSize: emojiFontSize, - }, - blockquote: { - borderColor: theme.border, - borderWidth: 4, - marginLeft: 0, - paddingLeft: 6, - }, - code: { - fontFamily: FontUtils.fontFamily.platform.MONOSPACE, - fontSize: 13, // TODO: should be 15 if inside h1, see StyleUtils.getCodeFontSize - color: theme.text, - backgroundColor: 'transparent', - }, - pre: { - fontFamily: FontUtils.fontFamily.platform.MONOSPACE, - fontSize: 13, - color: theme.text, - backgroundColor: 'transparent', - }, - mentionHere: { - color: theme.ourMentionText, - backgroundColor: theme.ourMentionBG, - }, - mentionUser: { - color: theme.mentionText, - backgroundColor: theme.mentionBG, - }, - mentionReport: { - color: theme.mentionText, - backgroundColor: theme.mentionBG, - }, - }), - [theme, emojiFontSize], + () => { + const styling = { + syntax: { + color: theme.syntax, + }, + link: { + color: theme.link, + }, + h1: { + fontSize: variables.fontSizeLarge, + }, + emoji: { + fontSize: emojiFontSize, + }, + blockquote: { + borderColor: theme.border, + borderWidth: 4, + marginLeft: 0, + paddingLeft: 6, + }, + code: { + fontFamily: FontUtils.fontFamily.platform.MONOSPACE, + fontSize: 13, // TODO: should be 15 if inside h1, see StyleUtils.getCodeFontSize + color: theme.text, + backgroundColor: 'transparent', + }, + pre: { + fontFamily: FontUtils.fontFamily.platform.MONOSPACE, + fontSize: 13, + color: theme.text, + backgroundColor: 'transparent', + }, + mentionHere: { + color: theme.ourMentionText, + backgroundColor: theme.ourMentionBG, + }, + mentionUser: { + color: theme.mentionText, + backgroundColor: theme.mentionBG, + }, + mentionReport: { + color: theme.mentionText, + backgroundColor: theme.mentionBG, + }, + }; + + if (excludeStyles.length) { + excludeStyles.forEach((key) => { + const style: Record = styling[key]; + if (style) { + Object.keys(style).forEach((styleKey) => { + style[styleKey] = undefined; + }); + } + }); + } + + return styling; + + }, + [theme, emojiFontSize, excludeStyles], ); return markdownStyle; From 84290e42da3794c621b792725222a8d7c16664b6 Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Tue, 7 May 2024 13:33:59 +0200 Subject: [PATCH 2/8] exclude reportMention style for chats not from group policy --- src/components/Composer/index.native.tsx | 3 ++- src/components/Composer/index.tsx | 3 ++- src/components/Composer/types.ts | 3 +++ .../ComposerWithSuggestions/ComposerWithSuggestions.tsx | 1 + 4 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/Composer/index.native.tsx b/src/components/Composer/index.native.tsx index 4d135cdd88e2..ac7eb95191ee 100644 --- a/src/components/Composer/index.native.tsx +++ b/src/components/Composer/index.native.tsx @@ -27,6 +27,7 @@ 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, @@ -34,7 +35,7 @@ function Composer( const textInput = useRef(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(); diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx index 4bc54d13b056..f7bf277050a2 100755 --- a/src/components/Composer/index.tsx +++ b/src/components/Composer/index.tsx @@ -70,13 +70,14 @@ function Composer( isReportActionCompose = false, isComposerFullSize = false, shouldContainScroll = false, + isGroupPolicyReport = false, ...props }: ComposerProps, ref: ForwardedRef, ) { const theme = useTheme(); const styles = useThemeStyles(); - const markdownStyle = useMarkdownStyle(value); + const markdownStyle = useMarkdownStyle(value, !isGroupPolicyReport ? ['mentionReport'] : []); const StyleUtils = useStyleUtils(); const textRef = useRef(null); const textInput = useRef(null); diff --git a/src/components/Composer/types.ts b/src/components/Composer/types.ts index 531bcd03f8bf..0ff91111bd07 100644 --- a/src/components/Composer/types.ts +++ b/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}; diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx index 469a7300a84f..142becc7231c 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx @@ -753,6 +753,7 @@ function ComposerWithSuggestions( onLayout={onLayout} onScroll={hideSuggestionMenu} shouldContainScroll={Browser.isMobileSafari()} + isGroupPolicyReport={isGroupPolicyReport} /> From 5b46503aae591dd3d4e77f5b746ef1bab9411c80 Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Fri, 10 May 2024 00:31:04 +0200 Subject: [PATCH 3/8] run prettier on useMarkdownStyle --- src/hooks/useMarkdownStyle.ts | 118 ++++++++++++++++------------------ 1 file changed, 57 insertions(+), 61 deletions(-) diff --git a/src/hooks/useMarkdownStyle.ts b/src/hooks/useMarkdownStyle.ts index d36b2ed9076b..2820f593128e 100644 --- a/src/hooks/useMarkdownStyle.ts +++ b/src/hooks/useMarkdownStyle.ts @@ -9,69 +9,65 @@ function useMarkdownStyle(message: string | null = null, excludeStyles: Array { - const styling = { - syntax: { - color: theme.syntax, - }, - link: { - color: theme.link, - }, - h1: { - fontSize: variables.fontSizeLarge, - }, - emoji: { - fontSize: emojiFontSize, - }, - blockquote: { - borderColor: theme.border, - borderWidth: 4, - marginLeft: 0, - paddingLeft: 6, - }, - code: { - fontFamily: FontUtils.fontFamily.platform.MONOSPACE, - fontSize: 13, // TODO: should be 15 if inside h1, see StyleUtils.getCodeFontSize - color: theme.text, - backgroundColor: 'transparent', - }, - pre: { - fontFamily: FontUtils.fontFamily.platform.MONOSPACE, - fontSize: 13, - color: theme.text, - backgroundColor: 'transparent', - }, - mentionHere: { - color: theme.ourMentionText, - backgroundColor: theme.ourMentionBG, - }, - mentionUser: { - color: theme.mentionText, - backgroundColor: theme.mentionBG, - }, - mentionReport: { - color: theme.mentionText, - backgroundColor: theme.mentionBG, - }, - }; + const markdownStyle = useMemo(() => { + const styling = { + syntax: { + color: theme.syntax, + }, + link: { + color: theme.link, + }, + h1: { + fontSize: variables.fontSizeLarge, + }, + emoji: { + fontSize: emojiFontSize, + }, + blockquote: { + borderColor: theme.border, + borderWidth: 4, + marginLeft: 0, + paddingLeft: 6, + }, + code: { + fontFamily: FontUtils.fontFamily.platform.MONOSPACE, + fontSize: 13, // TODO: should be 15 if inside h1, see StyleUtils.getCodeFontSize + color: theme.text, + backgroundColor: 'transparent', + }, + pre: { + fontFamily: FontUtils.fontFamily.platform.MONOSPACE, + fontSize: 13, + color: theme.text, + backgroundColor: 'transparent', + }, + mentionHere: { + color: theme.ourMentionText, + backgroundColor: theme.ourMentionBG, + }, + mentionUser: { + color: theme.mentionText, + backgroundColor: theme.mentionBG, + }, + mentionReport: { + color: theme.mentionText, + backgroundColor: theme.mentionBG, + }, + }; - if (excludeStyles.length) { - excludeStyles.forEach((key) => { - const style: Record = styling[key]; - if (style) { - Object.keys(style).forEach((styleKey) => { - style[styleKey] = undefined; - }); - } - }); - } + if (excludeStyles.length) { + excludeStyles.forEach((key) => { + const style: Record = styling[key]; + if (style) { + Object.keys(style).forEach((styleKey) => { + style[styleKey] = undefined; + }); + } + }); + } - return styling; - - }, - [theme, emojiFontSize, excludeStyles], - ); + return styling; + }, [theme, emojiFontSize, excludeStyles]); return markdownStyle; } From 5500e45d30161665d9763e9b66256479bf732fc1 Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Tue, 14 May 2024 10:39:51 +0200 Subject: [PATCH 4/8] use non styling values for overwriting excluded styles --- src/hooks/useMarkdownStyle.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/hooks/useMarkdownStyle.ts b/src/hooks/useMarkdownStyle.ts index 2820f593128e..ef331ca31c9e 100644 --- a/src/hooks/useMarkdownStyle.ts +++ b/src/hooks/useMarkdownStyle.ts @@ -5,6 +5,16 @@ import FontUtils from '@styles/utils/FontUtils'; import variables from '@styles/variables'; import useTheme from './useTheme'; +const nonStylingDefaultValues: Record = { + color: 'black', + backgroundColor: 'transparent', + marginLeft: 0, + paddingLeft: 0, + borderColor: 'transparent', + borderWidth: 0, +} + + function useMarkdownStyle(message: string | null = null, excludeStyles: Array = []): MarkdownStyle { const theme = useTheme(); const emojiFontSize = containsOnlyEmojis(message ?? '') ? variables.fontSizeOnlyEmojis : variables.fontSizeNormal; @@ -60,7 +70,7 @@ function useMarkdownStyle(message: string | null = null, excludeStyles: Array = styling[key]; if (style) { Object.keys(style).forEach((styleKey) => { - style[styleKey] = undefined; + style[styleKey] = nonStylingDefaultValues[styleKey] ?? style[styleKey]; }); } }); From fccc83b2b0fa5d082f78a9bc955c08c48b98efe4 Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Tue, 14 May 2024 11:43:23 +0200 Subject: [PATCH 5/8] add comment for non styling map --- src/hooks/useMarkdownStyle.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/hooks/useMarkdownStyle.ts b/src/hooks/useMarkdownStyle.ts index ef331ca31c9e..714a22db643a 100644 --- a/src/hooks/useMarkdownStyle.ts +++ b/src/hooks/useMarkdownStyle.ts @@ -5,6 +5,7 @@ import FontUtils from '@styles/utils/FontUtils'; import variables from '@styles/variables'; import useTheme from './useTheme'; +// this map is used to reset the styles that are not needed - passing undefined value can break the native side const nonStylingDefaultValues: Record = { color: 'black', backgroundColor: 'transparent', From e5c5fdfd6fae18b25a73b9e9f5e7303fdec61d95 Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Tue, 14 May 2024 11:48:29 +0200 Subject: [PATCH 6/8] fix lint --- src/hooks/useMarkdownStyle.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/hooks/useMarkdownStyle.ts b/src/hooks/useMarkdownStyle.ts index 714a22db643a..a95124c08ed1 100644 --- a/src/hooks/useMarkdownStyle.ts +++ b/src/hooks/useMarkdownStyle.ts @@ -6,15 +6,14 @@ import variables from '@styles/variables'; import useTheme from './useTheme'; // this map is used to reset the styles that are not needed - passing undefined value can break the native side -const nonStylingDefaultValues: Record = { +const nonStylingDefaultValues: Record = { color: 'black', backgroundColor: 'transparent', marginLeft: 0, paddingLeft: 0, borderColor: 'transparent', borderWidth: 0, -} - +}; function useMarkdownStyle(message: string | null = null, excludeStyles: Array = []): MarkdownStyle { const theme = useTheme(); From 2bdb1a4efa5a5e1b8ab8aeddfd8f8055ef19beba Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Tue, 14 May 2024 18:40:17 +0200 Subject: [PATCH 7/8] use theme values for non styling object --- src/hooks/useMarkdownStyle.ts | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/hooks/useMarkdownStyle.ts b/src/hooks/useMarkdownStyle.ts index a95124c08ed1..61f39144cd74 100644 --- a/src/hooks/useMarkdownStyle.ts +++ b/src/hooks/useMarkdownStyle.ts @@ -5,20 +5,20 @@ import FontUtils from '@styles/utils/FontUtils'; import variables from '@styles/variables'; import useTheme from './useTheme'; -// this map is used to reset the styles that are not needed - passing undefined value can break the native side -const nonStylingDefaultValues: Record = { - color: 'black', - backgroundColor: 'transparent', - marginLeft: 0, - paddingLeft: 0, - borderColor: 'transparent', - borderWidth: 0, -}; - function useMarkdownStyle(message: string | null = null, excludeStyles: Array = []): 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 = useMemo(() =>({ + color: theme.text, + backgroundColor: 'transparent', + marginLeft: 0, + paddingLeft: 0, + borderColor: 'transparent', + borderWidth: 0, + }), [theme]); + const markdownStyle = useMemo(() => { const styling = { syntax: { @@ -77,7 +77,7 @@ function useMarkdownStyle(message: string | null = null, excludeStyles: Array Date: Wed, 15 May 2024 00:06:32 +0200 Subject: [PATCH 8/8] run prettier --- src/hooks/useMarkdownStyle.ts | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/src/hooks/useMarkdownStyle.ts b/src/hooks/useMarkdownStyle.ts index 61f39144cd74..57d17ffefb0b 100644 --- a/src/hooks/useMarkdownStyle.ts +++ b/src/hooks/useMarkdownStyle.ts @@ -10,14 +10,17 @@ function useMarkdownStyle(message: string | null = null, excludeStyles: Array = useMemo(() =>({ - color: theme.text, - backgroundColor: 'transparent', - marginLeft: 0, - paddingLeft: 0, - borderColor: 'transparent', - borderWidth: 0, - }), [theme]); + const nonStylingDefaultValues: Record = useMemo( + () => ({ + color: theme.text, + backgroundColor: 'transparent', + marginLeft: 0, + paddingLeft: 0, + borderColor: 'transparent', + borderWidth: 0, + }), + [theme], + ); const markdownStyle = useMemo(() => { const styling = {