Render URLs in markdown to open in a new window

Author: bzwrk

packages/connect-react/examples/nextjs/package-lock.json

@@ -53,5 +53,13 @@ export function Alert({ prop }: AlertProps) {
     alertStyles = baseStyles
   }
 
-  return <div className={`pd-alert-${prop.alertType}`} style={alertStyles}><Markdown>{prop.content}</Markdown></div>
+  return (<div className={`pd-alert-${prop.alertType}`} style={alertStyles}>
+    <Markdown components={{
+      a: ({ ...props }) => {
+        return <a {...props} target="_blank" rel="noopener noreferrer" />;
+      },
+    }}>
+      {prop.content}
+    </Markdown>
+  </div>)
 }

packages/connect-react/src/components/Alert.tsx

@@ -41,5 +41,11 @@ export function Description<T extends ConfigurableProps, U extends ConfigurableP
   if (!prop.description) {
     return null;
   }
-  return <div className={getClassNames("description", props)} style={getStyles("description", baseStyles, props)}><Markdown>{markdown}</Markdown></div>;
+  return <div className={getClassNames("description", props)} style={getStyles("description", baseStyles, props)}> <Markdown components={{
+    a: ({ ...props }) => {
+      return <a {...props} target="_blank" rel="noopener noreferrer" />;
+    },
+  }}>
+    {markdown}
+  </Markdown></div>;
 }