TryQuiet · vinkabuki · Aug 29, 2023 · Apr 27, 2023 · Apr 27, 2023 · Apr 28, 2023
diff --git a/...src/renderer/components/Channel/Channel.regression.cy.tsx/after launch-base.png b/...src/renderer/components/Channel/Channel.regression.cy.tsx/after launch-base.png
diff --git a/...src/renderer/components/Channel/Channel.regression.cy.tsx/after pageup-base.png b/...src/renderer/components/Channel/Channel.regression.cy.tsx/after pageup-base.png
diff --git a/packages/desktop/package-lock.json b/packages/desktop/package-lock.json
diff --git a/packages/desktop/package.json b/packages/desktop/package.json
@@ -137,7 +137,9 @@
     "get-port": "^5.1.1",
     "keymirror": "0.1.1",
     "pkijs": "^3.0.8",
+    "react-markdown": "^6.0.3",
     "react-qr-code": "^2.0.11",
+    "remark-gfm": "^1.0.0",
     "socket.io-client": "4.6.0"
   },
   "devDependencies": {
@@ -297,4 +299,4 @@
     "node": "18.12.1",
     "npm": "8.19.2"
   }
-}
+}
diff --git a/packages/desktop/src/renderer/components/MathMessage/MathMessageComponent.test.tsx b/packages/desktop/src/renderer/components/MathMessage/MathMessageComponent.test.tsx
@@ -107,7 +107,7 @@ describe('MathMessageComponent', () => {
       <body>
         <div>
           <span
-            class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-mg0tit-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1vefsqk-MuiTypography-root"
             data-testid="messagesGroupContent-1-0"
           >
             It is
@@ -187,7 +187,7 @@ describe('MathMessageComponent', () => {
             </mjx-container>
           </span>
           <span
-            class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-mg0tit-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1vefsqk-MuiTypography-root"
             data-testid="messagesGroupContent-1-2"
           >
             and
@@ -484,10 +484,21 @@ describe('MathMessageComponent', () => {
             </mjx-container>
           </span>
           <span
-            class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-mg0tit-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1vefsqk-MuiTypography-root"
             data-testid="messagesGroupContent-1-1"
           >
-            - look
+            <ul
+              class="TextMessageul"
+              depth="0"
+            >
+
+
+              <li>
+                look
+              </li>
+
+
+            </ul>
           </span>
         </div>
       </body>

diff --git a/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.test.tsx b/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.test.tsx
@@ -82,7 +82,7 @@ describe('BasicMessage', () => {
                       class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
                     >
                       <span
-                        class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-mg0tit-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1vefsqk-MuiTypography-root"
                         data-testid="messagesGroupContent-0"
                       >
                         message0
@@ -165,7 +165,7 @@ describe('BasicMessage', () => {
                       class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
                     >
                       <span
-                        class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-mg0tit-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1vefsqk-MuiTypography-root"
                         data-testid="messagesGroupContent-0"
                       >
                         message0
@@ -175,7 +175,7 @@ describe('BasicMessage', () => {
                       class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
                     >
                       <span
-                        class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-mg0tit-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1vefsqk-MuiTypography-root"
                         data-testid="messagesGroupContent-1"
                       >
                         message1
@@ -261,7 +261,7 @@ describe('BasicMessage', () => {
                       class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
                     >
                       <span
-                        class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-mg0tit-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1vefsqk-MuiTypography-root"
                         data-testid="messagesGroupContent-0"
                       >
                         message0
@@ -271,7 +271,7 @@ describe('BasicMessage', () => {
                       class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
                     >
                       <span
-                        class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-mg0tit-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1vefsqk-MuiTypography-root"
                         data-testid="messagesGroupContent-1"
                       >
                         message1
@@ -355,7 +355,7 @@ describe('BasicMessage', () => {
                       class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
                     >
                       <span
-                        class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-mg0tit-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1vefsqk-MuiTypography-root"
                         data-testid="messagesGroupContent-0"
                       >
                         message0
@@ -365,7 +365,7 @@ describe('BasicMessage', () => {
                       class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
                     >
                       <span
-                        class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-mg0tit-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1vefsqk-MuiTypography-root"
                         data-testid="messagesGroupContent-0"
                       >
                         message0

diff --git a/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.test.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.test.tsx
@@ -133,7 +133,7 @@ describe('ChannelMessages', () => {
                             class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
                           >
                             <span
-                              class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-mg0tit-MuiTypography-root"
+                              class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1vefsqk-MuiTypography-root"
                               data-testid="messagesGroupContent-string"
                             >
                               string

diff --git a/packages/desktop/src/renderer/components/widgets/channels/NestedMessageContent.test.tsx b/packages/desktop/src/renderer/components/widgets/channels/NestedMessageContent.test.tsx
@@ -19,7 +19,7 @@ describe('NestedMessageContent', () => {
             class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
           >
             <span
-              class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-mg0tit-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body1 TextMessagemessage css-1vefsqk-MuiTypography-root"
               data-testid="messagesGroupContent-0"
             >
               message0
@@ -40,7 +40,7 @@ describe('NestedMessageContent', () => {
             class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
           >
             <span
-              class="MuiTypography-root MuiTypography-body1 TextMessagemessage TextMessagepending css-mg0tit-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body1 TextMessagemessage TextMessagepending css-1vefsqk-MuiTypography-root"
               data-testid="messagesGroupContent-0"
             >
               message0
@@ -97,7 +97,7 @@ describe('NestedMessageContent', () => {
             class="MuiGrid-root MuiGrid-item css-15myz84-MuiGrid-root"
           >
             <span
-              class="MuiTypography-root MuiTypography-body1 TextMessagemessage TextMessagepending css-mg0tit-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body1 TextMessagemessage TextMessagepending css-1vefsqk-MuiTypography-root"
               data-testid="messagesGroupContent-0"
             >
               message0

diff --git a/packages/desktop/src/renderer/components/widgets/channels/TextMessage.tsx b/packages/desktop/src/renderer/components/widgets/channels/TextMessage.tsx
@@ -1,15 +1,25 @@
 import { Typography, styled } from '@mui/material'
 import classNames from 'classnames'
 import React, { ReactNode } from 'react'
-import Linkify from 'react-linkify'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
 import theme from '../../../theme'
 
 const PREFIX = 'TextMessage'
 
 const classes = {
   message: `${PREFIX}message`,
   pending: `${PREFIX}pending`,
+  blockquote: `${PREFIX}blockquote`,
+  code: `${PREFIX}code`,
+  pre: `${PREFIX}pre`,
+  hr: `${PREFIX}hr`,
   link: `${PREFIX}link`,
+  ol: `${PREFIX}list`,
+  ul: `${PREFIX}ul`,
+  table: `${PREFIX}table`,
+  tableHeaderCell: `${PREFIX}tableHeaderCell`,
+  tableRowCell: `${PREFIX}tableRowCell`,
 }
 
 const StyledTypography = styled(Typography)(() => ({
@@ -24,13 +34,69 @@ const StyledTypography = styled(Typography)(() => ({
     color: theme.palette.colors.lightGray,
   },
 
+  [`& .${classes.blockquote}`]: {
+    lineHeight: '1em',
+    whiteSpace: 'normal',
+    marginInlineStart: 0,
+    marginBlockStart: '.5em',
+    marginBlockEnd: '.5em',
+    paddingTop: '.5em',
+    paddingBottom: '.5em',
+    paddingLeft: '1em',
+    borderLeft: 'solid',
+    borderLeftWidth: '3px',
+    borderColor: theme.palette.colors.lightGray,
+    color: theme.palette.colors.lightGray,
+  },
+
+  [`& .${classes.code}`]: {
+    backgroundColor: theme.palette.colors.veryLightGray,
+    padding: '.25em',
+  },
+
+  [`& .${classes.pre}`]: {
+    backgroundColor: theme.palette.colors.veryLightGray,
+    padding: '.25em',
+  },
+
+  [`& .${classes.hr}`]: {
+    marginTop: '2em',
+  },
+
   [`& .${classes.link}`]: {
     color: theme.palette.colors.lushSky,
     cursor: 'pointer',
+    textDecoration: 'none',
     '&:hover': {
       textDecoration: 'underline',
     },
   },
+
+  [`& .${classes.ol}`]: {
+    paddingInlineStart: '15px',
+    whiteSpace: 'normal',
+  },
+
+  [`& .${classes.ul}`]: {
+    paddingInlineStart: '15px',
+    whiteSpace: 'normal',
+    listStyleType: 'disc',
+  },
+
+  [`& .${classes.table}`]: {
+    width: '100%',
+  },
+
+  [`& .${classes.tableHeaderCell}`]: {
+    borderBottom: 'solid',
+    borderBottomWidth: 1,
+    borderColor: theme.palette.colors.veryLightGray,
+    textAlign: 'center',
+  },
+
+  [`& .${classes.tableRowCell}`]: {
+    textAlign: 'center',
+  },
 })) as typeof Typography
 
 export interface TextMessageComponentProps {
@@ -64,7 +130,56 @@ export const TextMessageComponent: React.FC<TextMessageComponentProps> = ({ mess
       })}
       data-testid={`messagesGroupContent-${messageId}`}
     >
-      <Linkify componentDecorator={componentDecorator}>{message}</Linkify>
+      <ReactMarkdown
+        remarkPlugins={[[remarkGfm, { singleTilde: false }]]}
+        children={message}
+        components={{
+          a: ({ node, ...props }) => (
+            <a
+              onClick={e => {
+                e.preventDefault()
+                if (props.href) openUrl(props.href)
+              }}
+              className={classNames({ [classes.link]: true })}
+              {...props}
+            />
+          ),
+          // Not working in older ReactMarkdown version we use because of ESM
+          // blockquote: ({ node, ...props }) => (
+          //   <blockquote className={classNames({ [classes.blockquote]: true })} {...props} />
+          // ),
+          code: ({ node, ...props }) => <code className={classNames({ [classes.code]: true })} {...props} />,
+          pre: ({ node, ...props }) => <pre className={classNames({ [classes.pre]: true })} {...props} />,
+          hr: ({ node, ...props }) => <hr className={classNames({ [classes.hr]: true })} {...props} />,
+          img: ({ node, ...props }) => (
+            <p>
+              ![{props.alt}](
+              <a
+                onClick={e => {
+                  e.preventDefault()
+                  if (props.src) openUrl(props.src)
+                }}
+                className={classNames({ [classes.link]: true })}
+                href={props.src}
+              >
+                {props.src}
+              </a>
+              )
+            </p>
+          ),
+          p: React.Fragment,
+          ol: ({ node, ...props }) => <ol className={classNames({ [classes.ol]: true })} {...props} />,
+          ul: ({ node, ...props }) => <ul className={classNames({ [classes.ul]: true })} {...props} />,
+          table: ({ node, ...props }) => <table className={classNames({ [classes.table]: true })} {...props} />,
+          // Not working in older ReactMarkdown version we use because of ESM
+          // th: ({ node, ...props }) => (
+          //   <th className={classNames({ [classes.tableHeaderCell]: props.isHeader })} {...props} />
+          // ),
+          // td: ({ node, ...props }) => (
+          //   <td className={classNames({ [classes.tableRowCell]: true })} {...props} />
+          // )
+        }}
+      />
     </StyledTypography>
   )
 }