aboutsummaryrefslogtreecommitdiff
path: root/src/lib
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib')
-rw-r--r--src/lib/Markdown/Markdown.tsx41
1 files changed, 26 insertions, 15 deletions
diff --git a/src/lib/Markdown/Markdown.tsx b/src/lib/Markdown/Markdown.tsx
index 4fa6a9a..32732ec 100644
--- a/src/lib/Markdown/Markdown.tsx
+++ b/src/lib/Markdown/Markdown.tsx
@@ -10,7 +10,7 @@ import Heading from './Heading';
import Image from './Image';
interface PropTypes {
- data?: string;
+ source?: string;
url?: string;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
context?: Record<string, any>;
@@ -24,33 +24,44 @@ const resolveUrls = (line: string, baseUrl: string): string => line.replace(
(match, text, url) => `[${text}](${baseUrl}/${url})`,
);
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const WrappedInlineCode = (context: Record<string, any>): React.FC => ({ children }) => {
+ if (typeof children === 'string' && children?.startsWith('$')) {
+ const symbol = children.slice(1);
+ return context[symbol] || null;
+ }
+ return <InlineCode>{children}</InlineCode>;
+};
+
+const Markdown: React.FC<PropTypes> = ({
+ children,
+ url,
+ source,
+ context = {},
+}) => {
+ const [markdown, setMarkdown] = useState<string>(source || '');
-const Markdown: React.FC<PropTypes> = ({ data, url, context = {} }) => {
- const [markdown, setMarkdown] = useState<string>(data || '');
+ useEffect(() => {
+ if (url) axios.get(url).then(response => setMarkdown(response.data));
+ }, [url]);
- if (url) axios.get(url).then(response => setMarkdown(response.data));
+ useEffect(() => {
+ if (source) setMarkdown(source);
+ }, [source]);
useEffect(() => {
- if (!url) setMarkdown(data || '');
- }, [data, url]);
+ if (children && typeof children === 'string') setMarkdown(children);
+ }, [children]);
const baseUrl = url?.slice(0, url.lastIndexOf('/')) || '';
const sanitized = resolveUrls(markdown, baseUrl);
- const WrappedInlineCode: React.FC = ({ children }) => {
- if (typeof children === 'string' && children?.startsWith('$')) {
- const symbol = children.slice(1);
- return context[symbol] || null;
- }
- return <InlineCode>{children}</InlineCode>;
- };
-
const renderers = {
heading: Heading,
code: CodeBlock,
link: Link,
image: Image,
- inlineCode: WrappedInlineCode,
+ inlineCode: WrappedInlineCode(context),
};
return (