MM-53107 Add limit to Markdown nodes (#7528) (#7535)

* MM-53107 Add limit to Markdown nodes

* Update commonmark to published version

* Rename field to camel case for consistency

* Update Markdown tests for removed children

(cherry picked from commit 2651dd3)

Co-authored-by: Harrison Healey <[email protected]>

app/components/markdown/index.ts

@@ -5,7 +5,7 @@ import {withDatabase} from '@nozbe/watermelondb/DatabaseProvider';
 import withObservables from '@nozbe/with-observables';
 import React from 'react';
 
-import {observeConfigBooleanValue} from '@queries/servers/system';
+import {observeConfigBooleanValue, observeConfigIntValue} from '@queries/servers/system';
 
 import Markdown from './markdown';
 
@@ -14,11 +14,13 @@ import type {WithDatabaseArgs} from '@typings/database/database';
 const enhanced = withObservables([], ({database}: WithDatabaseArgs) => {
     const enableLatex = observeConfigBooleanValue(database, 'EnableLatex');
     const enableInlineLatex = observeConfigBooleanValue(database, 'EnableInlineLatex');
+    const maxNodes = observeConfigIntValue(database, 'MaxMarkdownNodes');
 
     return {
         enableLatex,
         enableInlineLatex,
+        maxNodes,
     };
 });
 
-export default React.memo(withDatabase(enhanced(Markdown)));
+export default withDatabase(enhanced(React.memo(Markdown)));

app/components/markdown/markdown.tsx

@@ -62,14 +62,15 @@ type MarkdownProps = {
     layoutHeight?: number;
     layoutWidth?: number;
     location: string;
+    maxNodes: number;
     mentionKeys?: UserMentionKey[];
     minimumHashtagLength?: number;
     onPostPress?: (event: GestureResponderEvent) => void;
     postId?: string;
     searchPatterns?: SearchPattern[];
     textStyles?: MarkdownTextStyles;
     theme: Theme;
-    value?: string | number;
+    value?: string;
 }
 
 const getStyleSheet = makeStyleSheetFromTheme((theme) => {
@@ -94,6 +95,9 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             color: editedColor,
             opacity: editedOpacity,
         },
+        maxNodesWarning: {
+            color: theme.errorTextColor,
+        },
         atMentionOpacity: {
             opacity: 1,
         },
@@ -126,7 +130,7 @@ const Markdown = ({
     autolinkedUrlSchemes, baseTextStyle, blockStyles, channelId, channelMentions,
     disableAtChannelMentionHighlight, disableAtMentions, disableBlockQuote, disableChannelLink,
     disableCodeBlock, disableGallery, disableHashtags, disableHeading, disableTables,
-    enableInlineLatex, enableLatex,
+    enableInlineLatex, enableLatex, maxNodes,
     imagesMetadata, isEdited, isReplyPost, isSearchResult, layoutHeight, layoutWidth,
     location, mentionKeys, minimumHashtagLength = 3, onPostPress, postId, searchPatterns,
     textStyles = {}, theme, value = '', baseParagraphStyle,
@@ -520,6 +524,19 @@ const Markdown = ({
         );
     };
 
+    const renderMaxNodesWarning = () => {
+        const styles = [baseTextStyle, style.maxNodesWarning];
+
+        return (
+            <FormattedText
+                id='markdown.max_nodes.error'
+                defaultMessage='This message is too long to by shown fully on a mobile device. Please view it on desktop or contact an admin to increase this limit.'
+                style={styles}
+                testID='max_nodes_warning'
+            />
+        );
+    };
+
     const createRenderer = () => {
         const renderers: any = {
             text: renderText,
@@ -534,7 +551,7 @@ const Markdown = ({
             channelLink: renderChannelLink,
             emoji: renderEmoji,
             hashtag: renderHashtag,
-            latexinline: renderLatexInline,
+            latexInline: renderLatexInline,
 
             paragraph: renderParagraph,
             heading: renderHeading,
@@ -560,11 +577,13 @@ const Markdown = ({
             checkbox: renderCheckbox,
 
             editedIndicator: renderEditedIndicator,
+            maxNodesWarning: renderMaxNodesWarning,
         };
 
         return new Renderer({
             renderers,
             renderParagraphsInLists: true,
+            maxNodes,
             getExtraPropsForNode,
             allowedTypes: Object.keys(renderers),
         });

app/components/markdown/markdown_table_row/index.tsx

@@ -45,9 +45,11 @@ const MarkdownTableRow = ({isFirstRow, isLastRow, children}: MarkdownTableRowPro
     // Add an extra prop to the last cell so that it knows not to render a right border since the container
     // will handle that
     const renderChildren = React.Children.toArray(children) as ReactElement[];
-    renderChildren[renderChildren.length - 1] = React.cloneElement(renderChildren[renderChildren.length - 1], {
-        isLastCell: true,
-    });
+    if (renderChildren.length > 0) {
+        renderChildren[renderChildren.length - 1] = React.cloneElement(renderChildren[renderChildren.length - 1], {
+            isLastCell: true,
+        });
+    }
 
     return (
         <View

app/components/markdown/transform.test.ts

@@ -2131,10 +2131,6 @@ describe('Components.Markdown.transform', () => {
                     }, {
                         type: 'at_mention',
                         _mentionName: 'user',
-                        children: [{
-                            type: 'text',
-                            literal: '@user',
-                        }],
                     }],
                 }],
             },
@@ -2154,10 +2150,6 @@ describe('Components.Markdown.transform', () => {
                         children: [{
                             type: 'at_mention',
                             _mentionName: 'words',
-                            children: [{
-                                type: 'text',
-                                literal: '@words',
-                            }],
                         }],
                     }],
                 }],
@@ -2178,10 +2170,6 @@ describe('Components.Markdown.transform', () => {
                         children: [{
                             type: 'at_mention',
                             _mentionName: 'words',
-                            children: [{
-                                type: 'text',
-                                literal: '@words',
-                            }],
                         }],
                     }],
                 }],
@@ -2579,10 +2567,6 @@ describe('Components.Markdown.transform', () => {
                         children: [{
                             type: 'at_mention',
                             _mentionName: 'channel.',
-                            children: [{
-                                type: 'text',
-                                literal: '@channel.',
-                            }],
                         }],
                     }],
                 }],
@@ -2601,10 +2585,6 @@ describe('Components.Markdown.transform', () => {
                     }, {
                         type: 'at_mention',
                         _mentionName: 'Gvn.',
-                        children: [{
-                            type: 'text',
-                            literal: '@Gvn.',
-                        }],
                     }],
                 }],
             },

assets/base/i18n/en.json

@@ -404,6 +404,7 @@
   "login.signingIn": "Logging In",
   "login.username": "Username",
   "markdown.latex.error": "Latex render error",
+  "markdown.max_nodes.error": "This message is too long to by shown fully on a mobile device. Please view it on desktop or contact an admin to increase this limit.",
   "mentions.empty.paragraph": "You'll see messages here when someone mentions you or uses terms you're monitoring.",
   "mentions.empty.title": "No Mentions yet",
   "mobile.about.appVersion": "App Version: {version} (Build {number})",

package.json

@@ -38,8 +38,8 @@
     "@stream-io/flat-list-mvcp": "0.10.3",
     "@tsconfig/react-native": "3.0.2",
     "base-64": "1.0.0",
-    "commonmark": "npm:@mattermost/[email protected]0",
-    "commonmark-react-renderer": "github:mattermost/commonmark-react-renderer#2c660491041f7595f6ce5a05f6dc2e30ca769d3a",
+    "commonmark": "npm:@mattermost/[email protected]1",
+    "commonmark-react-renderer": "github:mattermost/commonmark-react-renderer#235bc817bcade503fb81fa51bbbe3c84f958ed12",
     "deep-equal": "2.2.2",
     "deepmerge": "4.3.1",
     "emoji-regex": "10.2.1",

patches/@types+commonmark-react-renderer+4.3.1.patch

@@ -1,17 +1,18 @@
 diff --git a/node_modules/@types/commonmark-react-renderer/index.d.ts b/node_modules/@types/commonmark-react-renderer/index.d.ts
-index 9ee5664..44d9a20 100755
+index 9ee5664..7ada0a0 100755
 --- a/node_modules/@types/commonmark-react-renderer/index.d.ts
 +++ b/node_modules/@types/commonmark-react-renderer/index.d.ts
-@@ -88,6 +88,8 @@ declare namespace ReactRenderer {
+@@ -88,6 +88,9 @@ declare namespace ReactRenderer {
          transformLinkUri?: ((uri: string) => string) | null | undefined;
          transformImageUri?: ((uri: string) => string) | null | undefined;
          linkTarget?: string | undefined;
 +        renderParagraphsInLists?: boolean;
++        maxNodes?: number;
 +        getExtraPropsForNode?: (node: any) => Record<string, any>;
      }
 
      interface Renderer {
-@@ -113,6 +115,7 @@ interface ReactRenderer {
+@@ -113,6 +116,7 @@ interface ReactRenderer {
      uriTransformer: (uri: string) => string;
      types: string[];
      renderers: ReactRenderer.Renderers;

types/api/config.d.ts

@@ -143,6 +143,7 @@ interface ClientConfig {
     LdapPositionAttributeSet: string;
     LockTeammateNameDisplay: string;
     MaxFileSize: string;
+    MaxMarkdownNodes: string;
     MaxNotificationsPerChannel: string;
     MaxPostSize: string;
     MinimumHashtagLength: string;