A frontend/containers/Travel/DetailsLink.tsx

@@ -0,0 +1,12 @@ 
+import Link from "@mui/material/Link";
+import { IntermediateRepresentation } from "linkifyjs";
+
+const DetailsLink = ({attributes, content}: IntermediateRepresentation) => {
+  return (
+    <Link {...attributes} target="_blank">
+      {content}
+    </Link>
+  );
+};
+
+export default DetailsLink;

M frontend/containers/Travel/Header.tsx → frontend/containers/Travel/Header.tsx

@@ -1,4 +1,5 @@ 
 import moment from 'moment';
+import Linkify from 'linkify-react';
 import Typography from '@mui/material/Typography';
 import IconButton from '@mui/material/IconButton';
 import TuneIcon from '@mui/icons-material/Tune';
@@ -12,6 +13,7 @@ import getMapsLink from '../../lib/getMapsLink';
 import useMapStore from '../../stores/useMapStore';
 import usePermissions from '../../hooks/usePermissions';
 import useProfile from '../../hooks/useProfile';
+import DetailsLink from './DetailsLink';
 import {TravelEntity} from '../../generated/graphql';
 
 interface Props {
@@ -28,7 +30,7 @@ const {t} = useTranslation();
   const {
     userPermissions: {canEditTravel},
   } = usePermissions();
-  const {setFocusOnTravel, focusedTravel} = useMapStore();
+  const {setFocusOnTravel} = useMapStore();
   const {userId} = useProfile();
   const isUserTripCreator =
     userId && userId === travel.attributes.user?.data?.id;
@@ -118,7 +120,12 @@ <Box sx={{marginTop: 2}}>
           <Typography variant="overline" sx={{color: 'GrayText'}}>
             {t('travel.fields.details')}
           </Typography>
-          <Typography variant="body1" sx={{whiteSpace: 'pre-line'}}>{travel.attributes.details}</Typography>
+
+          <Typography variant="body1" sx={{whiteSpace: 'pre-line'}} onClick={e => e.stopPropagation()}>
+            <Linkify options={{render: DetailsLink}}>
+              {travel.attributes.details}
+            </Linkify>
+          </Typography>
         </Box>
       )}
       <LinearProgress

M frontend/package.json → frontend/package.json

@@ -27,6 +27,8 @@ "deepmerge": "^4.3.1",
     "graphql": "^16.8.0",
     "i18next": "^23.4.4",
     "leaflet": "^1.9.4",
+    "linkify-react": "^4.1.3",
+    "linkifyjs": "^4.1.3",
     "marked": "^7.0.3",
     "moment": "^2.29.4",
     "next": "v13.4.12",

M frontend/yarn.lock → frontend/yarn.lock

@@ -4147,7 +4147,7 @@ minimatch "^9.0.1"
     minipass "^7.0.4"
     path-scurry "^1.10.2"
 
-glob@^7.0.3, glob@^7.1.1, glob@^7.1.3, glob@^7.1.6, glob@^7.2.0:
+glob@^7.0.3, glob@^7.1.1, glob@^7.1.3, glob@^7.1.6:
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
   integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
@@ -4348,15 +4348,6 @@ hyphenate-style-name@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
   integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
-
-i18next-json-sync@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/i18next-json-sync/-/i18next-json-sync-3.1.2.tgz#996d6731fa03e6240c078b91c1402062869e65a5"
-  integrity sha512-svJXk7Zt40ddLZPJjRpDx2acEmvbyua9/ijiBc3LoR5urmOQpPf/vYJEBxbCoZKRXRVaj4S+Jqv1yPQ5pk3Zlg==
-  dependencies:
-    glob "^7.2.0"
-    json-stable-stringify "^1.0.1"
-    yargs "^17.0.0"
 
 i18next@^23.4.4:
   version "23.11.2"
@@ -5057,6 +5048,16 @@ lines-and-columns@^1.1.6:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
+
+linkify-react@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/linkify-react/-/linkify-react-4.1.3.tgz#461d348b4bdab3fcd0452ae1b5bbc22536395b97"
+  integrity sha512-rhI3zM/fxn5BfRPHfi4r9N7zgac4vOIxub1wHIWXLA5ENTMs+BGaIaFO1D1PhmxgwhIKmJz3H7uCP0Dg5JwSlA==
+
+linkifyjs@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-4.1.3.tgz#0edbc346428a7390a23ea2e5939f76112c9ae07f"
+  integrity sha512-auMesunaJ8yfkHvK4gfg1K0SaKX/6Wn9g2Aac/NwX+l5VdmFZzo/hdPGxEOETj+ryRa4/fiOPjeeKURSAJx1sg==
 
 listr2@^4.0.5:
   version "4.0.5"