Auto detect urls and create links

mayank1513 · Jul 3, 2024 · 7add6e7 · 7add6e7
1 parent b688a3a
commit 7add6e7
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -23,7 +23,8 @@
     "react-markdown": "^9.0.1",
     "react-toastify": "^9.1.3",
     "react-webgl-trails": "^0.0.4",
-    "rehype-raw": "^7.0.0"
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.0"
   },
   "devDependencies": {
     "@changesets/cli": "^2.27.1",

diff --git a/src/components/task/index.tsx b/src/components/task/index.tsx
@@ -3,6 +3,7 @@ import { RefObject, useId, useRef, useState } from "react";
 import { Draggable } from "react-beautiful-dnd";
 import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
+import remarkGfm from "remark-gfm";
 import { useGlobalState } from "utils/context";
 import styles from "./task.module.scss";
 import { vscode } from "utils/vscode";
@@ -74,7 +75,9 @@ export default function Task({ task, index }: { task: TaskType; index: number })
             />
             {!isEditing &&
               (task.description.trim() ? (
-                <ReactMarkdown rehypePlugins={[rehypeRaw]}>{task.description.replace(/\n+/g, "\n\n")}</ReactMarkdown>
+                <ReactMarkdown rehypePlugins={[rehypeRaw]} remarkPlugins={[remarkGfm]}>
+                  {task.description.replace(/\n+/g, "\n\n")}
+                </ReactMarkdown>
               ) : (
                 <p className={styles.placeholder}>Enter task description in Markdown format.</p>
               ))}