Add Launch icon to external links #1797 (#1873)

hackforla · Sep 26, 2024 · 99ca8da · 99ca8da
1 parent 744ceb6
commit 99ca8da
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 7 deletions.
diff --git a/client/src/components/Faq/Answer.jsx b/client/src/components/Faq/Answer.jsx
@@ -3,6 +3,7 @@ import Quill from "../UI/Quill";
 import { createUseStyles } from "react-jss";
 import PropTypes from "prop-types";
 import { Interweave } from "interweave";
+import { MdLaunch } from "react-icons/md";
 
 const useStyles = createUseStyles(theme => ({
   answerContainer: {
@@ -22,6 +23,11 @@ const useStyles = createUseStyles(theme => ({
     "&:hover": {
       textDecoration: admin => admin && "underline"
     }
+  },
+  externalLinkIcon: {
+    fontSize: "14px",
+    padding: " 0 0.4em",
+    color: "#00F"
   }
 }));
 
@@ -78,7 +84,7 @@ export const Answer = ({
           style={{ display: "flex" }}
         >
           <div className={classes.answerText}>
-            <Interweave content={answer} />
+            <Interweave transform={TransformExternalLink} content={answer} />
           </div>
         </div>
       )}
@@ -94,3 +100,17 @@ Answer.propTypes = {
   setIsEditAnswer: PropTypes.func,
   onSetFaq: PropTypes.func
 };
+
+function TransformExternalLink(node, children) {
+  const classes = useStyles();
+  if (node.tagName == "A" && !node.getAttribute("href").startsWith("/")) {
+    return (
+      <span>
+        <a href={node.getAttribute("href")} target="external">
+          {children}
+          <MdLaunch className={classes.externalLinkIcon} />
+        </a>
+      </span>
+    );
+  }
+}
diff --git a/client/src/components/ToolTip/AccordionToolTip.js b/client/src/components/ToolTip/AccordionToolTip.js
@@ -2,6 +2,8 @@ import React from "react";
 import PropTypes from "prop-types";
 import { createUseStyles } from "react-jss";
 import clsx from "clsx";
+import { Interweave } from "interweave";
+import { MdLaunch } from "react-icons/md";
 
 const useStyles = createUseStyles({
   accordionTooltipLabel: {
@@ -69,18 +71,32 @@ const AccordionToolTip = ({
             classes.accordionTooltipLabel,
             classes.disabledDescription
           )}
-          dangerouslySetInnerHTML={{ __html: `${description}` }}
-        ></div>
+        >
+          <Interweave transform={TransformExternalLink} content={description} />
+        </div>
       ) : (
-        <div
-          className={clsx(classes.accordionTooltipLabel)}
-          dangerouslySetInnerHTML={{ __html: `${description}` }}
-        ></div>
+        <div className={clsx(classes.accordionTooltipLabel)}>
+          <Interweave transform={TransformExternalLink} content={description} />
+        </div>
       )}
     </>
   );
 };
 
+function TransformExternalLink(node, children) {
+  const classes = useStyles();
+  if (node.tagName == "A" && !node.getAttribute("href").startsWith("/")) {
+    return (
+      <span>
+        <a href={node.getAttribute("href")} target="external">
+          {children}
+          <MdLaunch className={classes.externalLinkIcon} />
+        </a>
+      </span>
+    );
+  }
+}
+
 AccordionToolTip.propTypes = {
   description: PropTypes.string,
   setShowDescription: PropTypes.func,