added MarkdownReader component

packages/app/src/components/MarkdownReader/index.jsx

@@ -0,0 +1,46 @@
+import React from "react"
+import ReactMarkdown from "react-markdown"
+import remarkGfm from "remark-gfm"
+import {
+    Result,
+    Skeleton
+} from "antd"
+
+import "./index.less"
+
+export default (props) => {
+    const [L_Doc, R_Doc, E_Doc] = app.cores.api.useRequest(async () => {
+        const response = await app.cores.api.customRequest({
+            method: "GET",
+            url: props.url,
+        })
+
+        return response.data
+    })
+
+    React.useEffect(() => {
+        app.layout.toggleCenteredContent(true)
+
+        return () => {
+            app.layout.toggleCenteredContent(false)
+        }
+    }, [])
+
+    if (E_Doc) {
+        return <Result
+            status="warning"
+            title="Cannot load this document"
+            subTitle="Something went wrong, please try again later."
+        />
+    }
+
+    if (L_Doc) {
+        return <Skeleton active />
+    }
+
+    return <div className="document_viewer">
+        <ReactMarkdown remarkPlugins={[remarkGfm]}>
+            {R_Doc}
+        </ReactMarkdown>
+    </div>
+}

packages/app/src/components/MarkdownReader/index.less

@@ -0,0 +1,58 @@
+.document_viewer {
+    display: flex;
+    flex-direction: column;
+
+    align-items: start;
+    justify-content: start;
+
+    text-align: start;
+
+    >* {
+        user-select: text;
+    }
+
+
+    blockquote {
+        background-color: var(--background-color-accent);
+        border-radius: 8px;
+        padding: 7px;
+    }
+
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        margin-top: 10px;
+        margin-bottom: 5px;
+    }
+
+    span,
+    p,
+    a {
+        margin: 5px;
+    }
+
+    ul {
+        color: var(--text-color);
+    }
+
+    ol {
+        color: var(--text-color);
+    }
+
+    li {
+        color: var(--text-color);
+    }
+
+    table {
+        color: var(--text-color);
+        margin: 20px 10px;
+
+
+        td {
+            padding: 7px;
+            outline: 1px solid var(--border-color);
+        }
+    }
+}