refactor: use markdown renderer to show terms (#428)

* refactor: use markdown render to show terms

* style: improve ui and markdown syntax

---------

Co-authored-by: Tejasv Sharma <tejasvonly@gmail.com>

cysync/package.json

@@ -65,7 +65,9 @@
     "eslint": "^8.8.0",
     "eslint-plugin-import": "^2.20.0",
     "fork-ts-checker-webpack-plugin": "^7.1.1",
+    "html-loader": "^4.2.0",
     "lint-staged": "^12.3.4",
+    "markdown-loader": "^8.0.0",
     "mock-aws-s3": "^4.0.2",
     "node-loader": "^2.0.0",
     "patch-package": "^6.5.1",
@@ -111,6 +113,7 @@
     "file-type": "^17.1.6",
     "github-url-to-object": "^4.0.6",
     "lodash": "^4.17.21",
+    "markdown-to-jsx": "^7.2.1",
     "multicoin-address-validator": "^0.5.8",
     "nock": "^13.2.4",
     "node-cache": "^5.1.2",
@@ -148,4 +151,4 @@
       "prettier --write"
     ]
   }
-}
+}

cysync/src/designSystem/designComponents/textComponents/Markdown.tsx

@@ -0,0 +1,66 @@
+import Box from '@mui/material/Box';
+import Link from '@mui/material/Link';
+import Typography from '@mui/material/Typography';
+import { shell } from 'electron';
+import ReactMarkdown from 'markdown-to-jsx';
+import * as React from 'react';
+
+function MarkdownListItem(props: any) {
+  return <Box component="li" sx={{ typography: 'body1' }} {...props} />;
+}
+
+const openExternalLink = (event: React.SyntheticEvent, link: string) => {
+  event.preventDefault();
+  shell.openExternal(link);
+};
+
+const ExternalLink: React.FC = ({ children }) => (
+  <Link
+    href="#"
+    onClick={e => openExternalLink(e, children.toString())}
+    color="secondary"
+    underline="hover"
+  >
+    {children}
+  </Link>
+);
+
+const options = {
+  overrides: {
+    h1: {
+      component: Typography,
+      props: {
+        color: 'textPrimary',
+        variant: 'h3',
+        gutterBottom: true,
+        style: { fontWeight: 700, marginTop: '1.5rem' }
+      }
+    },
+    h2: {
+      component: Typography,
+      props: {
+        color: 'textPrimary',
+        variant: 'h5',
+        gutterBottom: true,
+        style: { fontWeight: 600, marginTop: '1rem' }
+      }
+    },
+    p: {
+      component: Typography,
+      props: {
+        color: 'textPrimary',
+        paragraph: true
+      }
+    },
+    a: {
+      component: ExternalLink
+    },
+    li: {
+      component: MarkdownListItem
+    }
+  }
+};
+
+export default function Markdown(props: any) {
+  return <ReactMarkdown options={options} {...props} />;
+}

cysync/src/globals.d.ts

@@ -1,3 +1,7 @@
+declare module '*.md' {
+  const content: string;
+  export default content;
+}
 declare module '*.png' {
   const value: any;
   export default value;