web/src/components/FileViewer/Viewers/MarkdownViewer.tsx
import React from "react";
import styled from "styled-components";
import { type DocRenderer } from "@cyntler/react-doc-viewer";
import ReactMarkdown from "react-markdown";
const Container = styled.div`
padding: 16px;
`;
const StyledMarkdown = styled(ReactMarkdown)`
background-color: ${({ theme }) => theme.whiteBackground};
a {
font-size: 16px;
}
code {
color: ${({ theme }) => theme.secondaryText};
}
`;
const MarkdownRenderer: DocRenderer = ({ mainState: { currentDocument } }) => {
if (!currentDocument) return null;
const base64String = (currentDocument.fileData as string).split(",")[1];
// Decode the base64 string
const decodedData = atob(base64String);
return (
<Container id="md-renderer">
<StyledMarkdown>{decodedData}</StyledMarkdown>
</Container>
);
};
MarkdownRenderer.fileTypes = ["md", "text/plain"];
MarkdownRenderer.weight = 1;
export default MarkdownRenderer;