Markdown support for TextPreviews (#396)

* add markdown-to-jsx dependency

* replace TextPreview with Markdown

* basic table styling

* add light mode backgroundColor

frontend/src/components/share/FilePreview.tsx

@@ -1,9 +1,10 @@
-import { Button, Center, Stack, Text, Title } from "@mantine/core";
+import { Button, Center, Stack, Text, Title, useMantineTheme } from "@mantine/core";
 import { modals } from "@mantine/modals";
 import Link from "next/link";
 import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
 import { FormattedMessage } from "react-intl";
 import api from "../../services/api.service";
+import Markdown from "markdown-to-jsx";
 
 const FilePreviewContext = React.createContext<{
   shareId: string;
@@ -115,22 +116,40 @@ const ImagePreview = () => {
 
 const TextPreview = () => {
   const { shareId, fileId } = React.useContext(FilePreviewContext);
-  const [text, setText] = useState<string | null>(null);
+  const [ text, setText ] = useState<string>("");
+  const { colorScheme } = useMantineTheme();
 
   useEffect(() => {
     api
       .get(`/shares/${shareId}/files/${fileId}?download=false`)
-      .then((res) => setText(res.data));
-  }, [shareId, fileId]);
+      .then((res) => setText(res.data ?? "Preview couldn't be fetched."));
+  }, [ shareId, fileId ]);
+
+  const options = {
+    overrides: {
+      pre: {
+        props: {
+          style: {
+            backgroundColor: colorScheme == "dark"
+              ? "rgba(50, 50, 50, 0.5)"
+              : "rgba(220, 220, 220, 0.5)",
+            padding: "0.75em",
+            whiteSpace: "pre-wrap",
+          }
+        }
+      },
+      table: {
+        props: {
+          className: "md"
+        }
+      }
+    }
+  };
 
   return (
-    <Center style={{ minHeight: 200 }}>
-      <Stack align="center" spacing={10} style={{ width: "100%" }}>
-        <Text sx={{ whiteSpace: "pre-wrap" }} size="sm">
-          {text}
-        </Text>
-      </Stack>
-    </Center>
+    <Markdown options={options}>
+      {text}
+    </Markdown>
   );
 };