From 9ea38cfb3f3b0b3a58bc38aea7c6434962d03314 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Espino=20Garc=C3=ADa?= Date: Mon, 15 Jan 2024 10:19:33 +0100 Subject: [PATCH] Fix MM55258 (#7729) * Fix MM55258 * Address feedback --------- Co-authored-by: Mattermost Build --- app/components/syntax_highlight/index.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/app/components/syntax_highlight/index.tsx b/app/components/syntax_highlight/index.tsx index 8ddcdd63b..e528e3107 100644 --- a/app/components/syntax_highlight/index.tsx +++ b/app/components/syntax_highlight/index.tsx @@ -29,6 +29,12 @@ const styles = StyleSheet.create({ }, }); +function getMaximumLineLength(code: string) { + return code.split('\n').reduce((prev, v) => Math.max(prev, v.length), 0); +} + +const MAXIMUM_CODE_LINE_LENGTH = 300; + const Highlighter = ({code, language, textStyle, selectable = false}: SyntaxHiglightProps) => { const theme = useTheme(); const style = codeTheme[theme.codeTheme] || github; @@ -38,6 +44,8 @@ const Highlighter = ({code, language, textStyle, selectable = false}: SyntaxHigl {backgroundColor: style.hljs.background || theme.centerChannelBg}, ], [theme, selectable, style]); + const maximumLineLength = useMemo(() => getMaximumLineLength(code), [code]); + const languageToUse = maximumLineLength > MAXIMUM_CODE_LINE_LENGTH ? 'text' : language; const nativeRenderer = useCallback(({rows, stylesheet}: rendererProps) => { const digits = rows.length.toString().length; @@ -65,7 +73,7 @@ const Highlighter = ({code, language, textStyle, selectable = false}: SyntaxHigl return (