feat: parse update log

package.json

@@ -31,6 +31,7 @@
     "react-router-dom": "^6.2.2",
     "react-virtuoso": "^2.7.0",
     "recoil": "^0.6.1",
+    "snarkdown": "^2.0.0",
     "swr": "^1.2.1"
   },
   "devDependencies": {

src/components/layout/update-button.tsx

@@ -32,7 +32,9 @@ const UpdateButton = (props: Props) => {
         New
       </Button>
 
-      <UpdateDialog open={dialogOpen} onClose={() => setDialogOpen(false)} />
+      {dialogOpen && (
+        <UpdateDialog open={dialogOpen} onClose={() => setDialogOpen(false)} />
+      )}
     </>
   );
 };

src/components/layout/update-dialog.tsx

@@ -1,12 +1,14 @@
 import useSWR from "swr";
-import { useState } from "react";
+import snarkdown from "snarkdown";
+import { useState, useMemo } from "react";
 import {
+  Box,
   Button,
   Dialog,
   DialogActions,
   DialogContent,
-  DialogContentText,
   DialogTitle,
+  styled,
 } from "@mui/material";
 import { relaunch } from "@tauri-apps/api/process";
 import { checkUpdate, installUpdate } from "@tauri-apps/api/updater";
@@ -18,6 +20,10 @@ interface Props {
   onClose: () => void;
 }
 
+const UpdateLog = styled(Box)(() => ({
+  "h1,h2,h3,ul,ol,p": { margin: "0.5em 0", color: "inherit" },
+}));
+
 let uploadingState = false;
 
 const UpdateDialog = (props: Props) => {
@@ -46,19 +52,29 @@ const UpdateDialog = (props: Props) => {
     }
   };
 
+  // markdown parser
+  const parseContent = useMemo(() => {
+    if (!updateInfo?.manifest?.body) {
+      return "New Version is available";
+    }
+    return snarkdown(updateInfo?.manifest?.body);
+  }, [updateInfo]);
+
   return (
     <Dialog open={open} onClose={onClose}>
       <DialogTitle>New Version v{updateInfo?.manifest?.version}</DialogTitle>
+
       <DialogContent sx={{ minWidth: 360, maxWidth: 400, maxHeight: "50vh" }}>
-        <DialogContentText>{updateInfo?.manifest?.body}</DialogContentText>
+        <UpdateLog dangerouslySetInnerHTML={{ __html: parseContent }} />
       </DialogContent>
+
       <DialogActions>
         <Button onClick={onClose}>Cancel</Button>
         <Button
-          variant="contained"
           autoFocus
-          onClick={onUpdate}
+          variant="contained"
           disabled={uploading}
+          onClick={onUpdate}
         >
           Update
         </Button>

yarn.lock

@@ -1831,6 +1831,11 @@ signal-exit@^3.0.2:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
   integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
 
+snarkdown@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/snarkdown/-/snarkdown-2.0.0.tgz#b1feb4db91b9f94a8ebbd7a50f3e99aee18b1e03"
+  integrity sha512-MgL/7k/AZdXCTJiNgrO7chgDqaB9FGM/1Tvlcenenb7div6obaDATzs16JhFyHHBGodHT3B7RzRc5qk8pFhg3A==
+
 "source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"