auto parse links

package.json

@@ -25,6 +25,7 @@
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.3.0",
     "react-icons": "^4.4.0",
+    "react-linkify-it": "^1.0.7",
     "react-render-if-visible": "^2.1.0",
     "react-twitter-embed": "^4.0.4",
     "react-zoom-pan-pinch": "^2.1.3",

src/components/CustomNode/ObjectNode.tsx

@@ -28,7 +28,7 @@ const ObjectNode: React.FC<CustomNodeProps<[string, string][]>> = ({
                   value={val[1]}
                 >
                   <Styled.StyledKey objectKey>{val[0]}: </Styled.StyledKey>
-                  {val[1]}
+                  <Styled.StyledLinkItUrl>{val[1]}</Styled.StyledLinkItUrl>
                 </Styled.StyledRow>
               )
           )}

src/components/CustomNode/TextNode.tsx

@@ -23,7 +23,7 @@ const TextNode: React.FC<CustomNodeProps<string>> = ({
             data-key={value}
             parent={isParent}
           >
-            {value}
+            <Styled.StyledLinkItUrl>{value}</Styled.StyledLinkItUrl>
           </Styled.StyledKey>
         </Styled.StyledText>
       </ConditionalWrapper>

src/components/CustomNode/styles.tsx

@@ -1,4 +1,5 @@
 import styled, { DefaultTheme } from "styled-components";
+import { LinkItUrl } from "react-linkify-it";
 
 function getTypeColor(value: string, theme: DefaultTheme) {
   if (!Number.isNaN(+value)) return "#FD0079";
@@ -6,6 +7,11 @@ function getTypeColor(value: string, theme: DefaultTheme) {
   if (value === "false") return theme.TEXT_DANGER;
 }
 
+export const StyledLinkItUrl = styled(LinkItUrl)`
+  text-decoration: underline;
+  pointer-events: all;
+`;
+
 export const StyledTextWrapper = styled.div`
   display: flex;
   justify-content: center;

yarn.lock

@@ -6034,6 +6034,11 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.1.0.tgz#61aaed3096d30eacf2a2127118b5b41387d32a67"
   integrity sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==
 
+react-linkify-it@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/react-linkify-it/-/react-linkify-it-1.0.7.tgz#80486c0176644691345b19722678e4d716de5384"
+  integrity sha512-B0Vy0KCAdpkT7Ql/bOpPuAP4l20f78Eaq1yD/q9J2RltPSwD900I0GzQPXaH6gnoWX/qmkBXL42Q3jTnWw8KCw==
+
 react-render-if-visible@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/react-render-if-visible/-/react-render-if-visible-2.1.0.tgz#2a8d3c3e2f32394c78967bb58ee7546666831605"