Markdown implementation

packages/desktop/package.json

@@ -137,7 +137,9 @@
     "get-port": "^5.1.1",
     "keymirror": "0.1.1",
     "pkijs": "^3.0.8",
+    "react-markdown": "^8.0.7",
     "react-qr-code": "^2.0.11",
+    "remark-gfm": "^3.0.1",
     "socket.io-client": "4.6.0"
   },
   "devDependencies": {

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`,
-  link: `${PREFIX}link`
+  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,12 +34,68 @@ 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
 
@@ -46,14 +112,6 @@ export const TextMessageComponent: React.FC<TextMessageComponentProps> = ({
   pending,
   openUrl
 }) => {
-  const componentDecorator = (decoratedHref: string, decoratedText: string, key: number): ReactNode => {
-    return (
-      <a onClick={() => { openUrl(decoratedHref) }} className={classNames({ [classes.link]: true })} key={key}>
-        {decoratedText}
-      </a>
-    )
-  }
-
   return (
     <StyledTypography
       component={'span' as any}
@@ -62,7 +120,65 @@ export const TextMessageComponent: React.FC<TextMessageComponentProps> = ({
         [classes.pending]: pending
       })}
       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}
+            />
+          ),
+          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} />
+          ),
+          th: ({ node, ...props }) => (
+            <th className={classNames({ [classes.tableHeaderCell]: props.isHeader })} {...props} />
+          ),
+          td: ({ node, ...props }) => (
+            <td className={classNames({ [classes.tableRowCell]: true })} {...props} />
+          )
+        }}
+      />
     </StyledTypography>
   )
 }