Allow to select text from tables on full view (#6901)

* Allow to select text from tables on full view

* Fix check

* Remove inline style

app/components/markdown/markdown.tsx

@@ -1,6 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import {useManagedConfig} from '@mattermost/react-native-emm';
 import {Parser, Node} from 'commonmark';
 import Renderer from 'commonmark-react-renderer';
 import React, {ReactElement, useMemo, useRef} from 'react';
@@ -131,6 +132,7 @@ const Markdown = ({
     textStyles = {}, theme, value = '', baseParagraphStyle,
 }: MarkdownProps) => {
     const style = getStyleSheet(theme);
+    const managedConfig = useManagedConfig<ManagedConfig>();
 
     const urlFilter = (url: string) => {
         const scheme = getScheme(url);
@@ -471,10 +473,14 @@ const Markdown = ({
     };
 
     const renderText = ({context, literal}: MarkdownBaseRenderer) => {
+        const selectable = (managedConfig.copyAndPasteProtection !== 'true') && context.includes('table_cell');
         if (context.indexOf('image') !== -1) {
             // If this text is displayed, it will be styled by the image component
             return (
-                <Text testID='markdown_text'>
+                <Text
+                    testID='markdown_text'
+                    selectable={selectable}
+                >
                     {literal}
                 </Text>
             );
@@ -496,6 +502,7 @@ const Markdown = ({
             <Text
                 testID='markdown_text'
                 style={styles}
+                selectable={selectable}
             >
                 {literal}
             </Text>

app/components/markdown/markdown_table_cell/index.tsx

@@ -24,6 +24,11 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             justifyContent: 'flex-start',
             padding: 8,
         },
+        textContainer: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+        },
         cellRightBorder: {
             borderRightWidth: 1,
         },
@@ -57,7 +62,9 @@ const MarkdownTableCell = ({isLastCell, align, children}: MarkdownTableCellProps
             style={[cellStyle, textStyle]}
             testID='markdown_table_cell'
         >
-            {children}
+            <View style={style.textContainer}>
+                {children}
+            </View>
         </View>
     );
 };

app/components/post_list/post/system_message/__snapshots__/system_message_helpers.test.js.snap

@@ -44,6 +44,7 @@ exports[`renderSystemMessage uses renderer for Channel Display Name update 1`] =
         </Text>
       </Text>
       <Text
+        selectable={false}
         style={
           {
             "color": "rgba(63,67,80,0.6)",
@@ -106,6 +107,7 @@ exports[`renderSystemMessage uses renderer for Channel Header update 1`] = `
         </Text>
       </Text>
       <Text
+        selectable={false}
         style={
           {
             "color": "rgba(63,67,80,0.6)",
@@ -184,6 +186,7 @@ exports[`renderSystemMessage uses renderer for Guest added and join to channel 1
         </Text>
       </Text>
       <Text
+        selectable={false}
         style={
           {
             "color": "rgba(63,67,80,0.6)",
@@ -246,6 +249,7 @@ exports[`renderSystemMessage uses renderer for Guest added and join to channel 2
         </Text>
       </Text>
       <Text
+        selectable={false}
         style={
           {
             "color": "rgba(63,67,80,0.6)",
@@ -308,6 +312,7 @@ exports[`renderSystemMessage uses renderer for OLD archived channel without a us
   >
     <Text>
       <Text
+        selectable={false}
         style={
           {
             "color": "rgba(63,67,80,0.6)",
@@ -370,6 +375,7 @@ exports[`renderSystemMessage uses renderer for archived channel 1`] = `
         </Text>
       </Text>
       <Text
+        selectable={false}
         style={
           {
             "color": "rgba(63,67,80,0.6)",
@@ -432,6 +438,7 @@ exports[`renderSystemMessage uses renderer for unarchived channel 1`] = `
         </Text>
       </Text>
       <Text
+        selectable={false}
         style={
           {
             "color": "rgba(63,67,80,0.6)",

app/components/syntax_highlight/renderer.tsx

@@ -74,7 +74,7 @@ function createNativeElement({node, stylesheet, key, defaultColor, fontFamily, f
             <Text
                 key={key}
                 style={Object.assign({color: defaultColor}, startingStyle)}
-                selectable={true}
+                selectable={selectable}
             >
                 {value}
             </Text>

app/screens/code/index.tsx

@@ -31,7 +31,7 @@ const Code = ({code, language, textStyle}: Props) => {
             <SyntaxHiglight
                 code={code}
                 language={language}
-                selectable={managedConfig.copyAndPasteProtection !== 'false'}
+                selectable={managedConfig.copyAndPasteProtection !== 'true'}
                 textStyle={textStyle}
             />
         </SafeAreaView>