From e71118e2df077bbf71ac3387c4170a5e8d5e778a Mon Sep 17 00:00:00 2001
From: Xin Hao <haoxinst@gmail.com>
Date: Thu, 18 Jul 2024 01:42:08 +0800
Subject: [PATCH] UI: open docs in a new tab (#683)

---
 webui/src/routes/connections/JsonForm.tsx | 29 ++++++++++++++++++-----
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/webui/src/routes/connections/JsonForm.tsx b/webui/src/routes/connections/JsonForm.tsx
index 4c0e545fd..a6c14f7f2 100644
--- a/webui/src/routes/connections/JsonForm.tsx
+++ b/webui/src/routes/connections/JsonForm.tsx
@@ -31,6 +31,23 @@ import { AddIcon, DeleteIcon, WarningIcon } from '@chakra-ui/icons';
 import Markdown from 'react-markdown';
 import { useCombobox } from 'downshift';
 
+const CustomMarkdown = (props: any) => (
+  <Markdown
+    components={{
+      a({ node, children, ...props }) {
+        let url = new URL(props.href ?? '', location.href);
+        if (url.origin !== location.origin) {
+          props.target = '_blank';
+          props.rel = 'noopener noreferrer';
+        }
+        return <a {...props}>{children}</a>;
+      },
+    }}
+  >
+    {props.children}
+  </Markdown>
+);
+
 function StringWidget({
   path,
   title,
@@ -96,7 +113,7 @@ function StringWidget({
       ) : (
         description && (
           <FormHelperText>
-            <Markdown>{description}</Markdown>
+            <CustomMarkdown>{description}</CustomMarkdown>
             {format == 'var-str' && (
               <Text mt={1} fontSize="sm" color="gray.500">
                 This field supports{' '}
@@ -159,7 +176,7 @@ function NumberWidget({
       ) : (
         description && (
           <FormHelperText>
-            <Markdown>{description}</Markdown>
+            <CustomMarkdown>{description}</CustomMarkdown>
           </FormHelperText>
         )
       )}
@@ -202,7 +219,7 @@ function BooleanWidget({
       ) : (
         description && (
           <FormHelperText>
-            <Markdown>{description}</Markdown>
+            <CustomMarkdown>{description}</CustomMarkdown>
           </FormHelperText>
         )
       )}
@@ -346,7 +363,7 @@ function AutocompleteWidget({
       ) : (
         description && (
           <FormHelperText>
-            <Markdown>{description}</Markdown>
+            <CustomMarkdown>{description}</CustomMarkdown>
           </FormHelperText>
         )
       )}
@@ -416,7 +433,7 @@ function SelectWidget({
       </Select>
       {description && (
         <FormHelperText>
-          <Markdown>{description}</Markdown>
+          <CustomMarkdown>{description}</CustomMarkdown>
         </FormHelperText>
       )}
     </FormControl>
@@ -662,7 +679,7 @@ export function MapWidget({
             ) : (
               schema.description && (
                 <FormHelperText mt={0} pb={2}>
-                  <Markdown>{schema.description}</Markdown>
+                  <CustomMarkdown>{schema.description}</CustomMarkdown>
                 </FormHelperText>
               )
             )}