add linkify

tuckner · Dec 12, 2023 · 2209009 · 2209009
1 parent e75586f
commit 2209009
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 5 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,6 +21,8 @@
     "formik": "^2.2.9",
     "framer-motion": "^7.6.7",
     "gh-pages": "^6.1.0",
+    "linkify-react": "^4.1.3",
+    "linkifyjs": "^4.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.4.0",

diff --git a/src/components/Board/TaskDetails.tsx b/src/components/Board/TaskDetails.tsx
@@ -6,6 +6,7 @@ import Popup from "components/Popup";
 import DeleteItem from "components/DeleteItem";
 import { useSelector } from "react-redux";
 import { appData } from "redux/boardSlice";
+import Linkify from "linkify-react";
 
 interface Props {
   subtasks: ISubTask[];
@@ -24,6 +25,9 @@ export default function TaskDetails({
   // const dispatch = useDispatch();
   const data = useSelector(appData);
   const active: IBoard = data.active;
+  const linkoptions = {
+    className: "underline",
+  };
 
   const [selectedColumn, setSelectedColumn] = useState<string | any>(
     tasks
@@ -93,13 +97,17 @@ export default function TaskDetails({
           </div>
           <div>
             <p className="text-sm my-4">
-              {tasks.description ? tasks.description : "No description"}
+              <Linkify as="p" options={linkoptions}>
+                {tasks.description ? tasks.description : "No description"}
+              </Linkify>
             </p>
             <p className=" text-sm font-bold mb-2 ">Techniques:</p>
             <p className="text-sm my-3">
-              {tasks.techniques && tasks.techniques.map((technique: string, index: number) => (
-                <li key={index}>{technique}</li>
-              ))}
+              <Linkify as="p" options={linkoptions}>   
+                {tasks.techniques && tasks.techniques.map((technique: string, index: number) => (
+                    <li key={index}>{technique}</li>
+                ))}
+              </Linkify>
             </p>
             <p className=" text-sm font-bold mb-2 ">{`Workflows: ${tasks.subtasks.length}`}</p>
             <div

diff --git a/yarn.lock b/yarn.lock
@@ -3604,6 +3604,16 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
+linkify-react@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.npmjs.org/linkify-react/-/linkify-react-4.1.3.tgz"
+  integrity sha512-rhI3zM/fxn5BfRPHfi4r9N7zgac4vOIxub1wHIWXLA5ENTMs+BGaIaFO1D1PhmxgwhIKmJz3H7uCP0Dg5JwSlA==
+
+linkifyjs@^4.0.0, linkifyjs@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.npmjs.org/linkifyjs/-/linkifyjs-4.1.3.tgz"
+  integrity sha512-auMesunaJ8yfkHvK4gfg1K0SaKX/6Wn9g2Aac/NwX+l5VdmFZzo/hdPGxEOETj+ryRa4/fiOPjeeKURSAJx1sg==
+
 listr2@^3.8.3:
   version "3.14.0"
   resolved "https://registry.npmjs.org/listr2/-/listr2-3.14.0.tgz"
@@ -4300,7 +4310,7 @@ react-style-singleton@^2.2.1:
     invariant "^2.2.4"
     tslib "^2.0.0"
 
-react@*, "react@^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.8 || ^17.0 || ^18.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.5 || ^17.0.0 || ^18.0.0", "react@^16.9.0 || ^17.0.0 || ^18", "react@^16.9.0 || ^17.0.0 || ^18.0.0", react@^18.0.0, react@^18.2.0, react@>=16.8, react@>=16.8.0, react@>=18:
+react@*, "react@^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.8 || ^17.0 || ^18.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.5 || ^17.0.0 || ^18.0.0", "react@^16.9.0 || ^17.0.0 || ^18", "react@^16.9.0 || ^17.0.0 || ^18.0.0", react@^18.0.0, react@^18.2.0, "react@>= 15.0.0", react@>=16.8, react@>=16.8.0, react@>=18:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
   integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==