From dc6680f12fdf4b53a2a7fc024c38c25c6943970f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Quiroz?= <nh.quiroz@gmail.com>
Date: Mon, 13 Feb 2023 20:10:35 -0300
Subject: [PATCH] feat: open images in new tab

---
 src/components/UI/docs/MDComponents.tsx | 28 ++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/components/UI/docs/MDComponents.tsx b/src/components/UI/docs/MDComponents.tsx
index cbd3492139..a12c57f2a7 100644
--- a/src/components/UI/docs/MDComponents.tsx
+++ b/src/components/UI/docs/MDComponents.tsx
@@ -1,4 +1,5 @@
 import {
+  Box,
   Flex,
   Heading,
   Link,
@@ -10,16 +11,41 @@ import {
   UnorderedList
 } from '@chakra-ui/react';
 import NextLink from 'next/link';
+import Image from 'next/image';
 
 import { Code, Note } from '.';
 import { textStyles } from '../../../theme/foundations';
 import { parseHeadingId } from '../../../utils/parseHeadingId';
+import { childrenIsAnImage } from '../../../utils';
 
 const { h1, h2, h3, h4 } = textStyles;
 
 const MDComponents = {
-  // paragraphs
+  // paragraphs & images
   p: ({ children }: any) => {
+    // images in markdown are rendered as children of p tags for some reason
+    if (childrenIsAnImage(children)) {
+      const src = children[0].props.src;
+      const alt = children[0].props.alt || src;
+
+      return (
+        <Link href={src} isExternal>
+          <Box position='relative' mb={7}>
+            <Image
+              alt={alt}
+              src={src}
+              width={700}
+              height={475}
+              style={{
+                width: '100%',
+                height: 'auto'
+              }}
+            />
+          </Box>
+        </Link>
+      );
+    }
+
     return (
       <Text mb='7 !important' lineHeight={1.6}>
         {children}