feat: highlight links in cards and pqir and tooltips (#746)

components/canvas/NodeDescription.tsx

@@ -1,6 +1,6 @@
 import styles from "./Node.module.scss";
 import { Typography } from "@equinor/eds-core-react";
-import { formatNodeText } from "./utils/formatNodeText";
+import { FormatNodeText } from "./utils/FormatNodeText";
 import { getNodeTypeName } from "@/utils/getNodeTypeName";
 import { NodeTypes } from "@/types/NodeTypes";
 
@@ -18,9 +18,12 @@ export const NodeDescription = ({ header, description }: NodeDescription) => {
         </Typography>
       )}
       {description && (
-        <Typography variant="caption" className={styles["node__description"]}>
-          {formatNodeText(description)}
-        </Typography>
+        <FormatNodeText
+          variant="caption"
+          className={styles["node__description"]}
+        >
+          {description}
+        </FormatNodeText>
       )}
     </div>
   );

components/canvas/NodeTooltipSection.tsx

@@ -1,6 +1,5 @@
-import { Typography } from "@equinor/eds-core-react";
 import styles from "./NodeTooltipSection.module.scss";
-import { formatNodeText } from "./utils/formatNodeText";
+import { FormatNodeText } from "./utils/FormatNodeText";
 
 type NodeTooltipSection = {
   header?: string;
@@ -9,9 +8,9 @@ type NodeTooltipSection = {
 
 export const NodeTooltipSection = ({ header, text }: NodeTooltipSection) => (
   <div className={styles.container}>
-    <Typography variant="meta" color="Gray">
-      {formatNodeText(header)}
-    </Typography>
-    <Typography variant="body_long">{formatNodeText(text)}</Typography>
+    <FormatNodeText variant="meta" color="Gray">
+      {header}
+    </FormatNodeText>
+    <FormatNodeText variant="body_long">{text}</FormatNodeText>
   </div>
 );

components/canvas/SubActivityNode.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { Connection, Position, useStore } from "reactflow";
-import { formatNodeText } from "./utils/formatNodeText";
+import { FormatNodeText } from "./utils/FormatNodeText";
 import { formatDuration } from "types/unitDefinitions";
 import styles from "./Node.module.scss";
 import { SubActivityButton } from "./SubActivityButton";
@@ -152,9 +152,12 @@ export const SubActivityNode = ({
             description={description}
           />
           <div className={styles["node__role-container"]}>
-            <Typography variant="caption" className={styles["node__info-text"]}>
-              {formatNodeText(role)}
-            </Typography>
+            <FormatNodeText
+              variant="caption"
+              className={styles["node__info-text"]}
+            >
+              {role}
+            </FormatNodeText>
           </div>
           <div className={styles["node__time-container"]}>
             <Typography variant="caption" className={styles["node__info-text"]}>
@@ -172,9 +175,7 @@ export const SubActivityNode = ({
         {description && (
           <NodeTooltipSection header={"Description"} text={description} />
         )}
-        {role && (
-          <NodeTooltipSection header={"Role(s)"} text={formatNodeText(role)} />
-        )}
+        {role && <NodeTooltipSection header={"Role(s)"} text={role} />}
         {duration && (
           <NodeTooltipSection
             header={"Duration"}

components/canvas/utils/FormatNodeText.tsx

@@ -0,0 +1,38 @@
+import { Typography, TypographyProps } from "@equinor/eds-core-react";
+import styles from "../Node.module.scss";
+
+export function FormatNodeText({
+  children,
+  ...typographyProps
+}: TypographyProps) {
+  if (!children) return null;
+  const text = children.toString();
+  // Pattern matching for Markdown hyperlink urls
+  const pattern = /\[([^\]]+)]\(([^)]+)\)/g;
+  const result = [];
+  let lastIndex = 0;
+
+  text.replace(pattern, (match, linkText, _, offset) => {
+    if (lastIndex <= offset) {
+      result.push(<>{text.slice(lastIndex, offset)}</>);
+    }
+
+    result.push(
+      <Typography
+        className={styles[typographyProps.className ?? ""]}
+        style={{ cursor: "grab" }}
+        link
+      >
+        {linkText}
+      </Typography>
+    );
+    lastIndex = offset + match.length;
+    return linkText;
+  });
+
+  if (lastIndex < text.length) {
+    result.push(<>{text.slice(lastIndex)}</>);
+  }
+
+  return <Typography {...typographyProps}>{result}</Typography>;
+}