✨ Linkify URLs in Messages

package.json

@@ -29,6 +29,8 @@
     "jwt-decode": "^4.0.0",
     "leaflet": "^1.9.4",
     "leaflet-draw": "^1.0.4",
+    "linkify-react": "^4.1.3",
+    "linkifyjs": "^4.1.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.51.3",

src/components/message/Links.test.tsx

@@ -0,0 +1,25 @@
+import { render } from '@testing-library/react'
+import Links from './Links'
+
+describe('Links', () => {
+  it('should render links', () => {
+    const message = 'https://example.com/'
+
+    render(<Links message={message} />)
+
+    expect(document.querySelector('a')).toHaveAttribute('href', 'https://example.com/')
+    expect(document.querySelector('a')).toHaveTextContent('example.com')
+  })
+
+  it('should shorten long links', () => {
+    const message = 'https://www.systemli.org/2024/01/11/neue-sicherheitsma%C3%9Fnahme-gegen-mitm-angriffe-eingef%C3%BChrt/'
+
+    render(<Links message={message} />)
+
+    expect(document.querySelector('a')).toHaveAttribute(
+      'href',
+      'https://www.systemli.org/2024/01/11/neue-sicherheitsma%C3%9Fnahme-gegen-mitm-angriffe-eingef%C3%BChrt/'
+    )
+    expect(document.querySelector('a')).toHaveTextContent('www.systemli.org/2024/01/11/neue-sicherh...')
+  })
+})

src/components/message/Links.tsx

@@ -0,0 +1,30 @@
+import Linkify from 'linkify-react'
+import { FC } from 'react'
+
+interface Props {
+  message: string
+}
+const Links: FC<Props> = ({ message }) => {
+  const render = ({ attributes, content }: { attributes: unknown; content: string }) => {
+    const { href } = attributes as { href: string }
+    content = content.replace(/^(https?:\/\/)/, '')
+
+    if (content.endsWith('/')) {
+      content = content.slice(0, -1)
+    }
+
+    if (content.length > 40) {
+      content = content.slice(0, 40) + '...'
+    }
+
+    return (
+      <a href={href} target="_blank" title={href}>
+        {content}
+      </a>
+    )
+  }
+
+  return <Linkify options={{ defaultProtocol: 'https', render: render }}>{message}</Linkify>
+}
+
+export default Links

src/components/message/Message.tsx

@@ -7,6 +7,7 @@ import { Card, CardContent, IconButton, useTheme } from '@mui/material'
 import MessageAttachements from './MessageAttachments'
 import MessageFooter from './MessageFooter'
 import { Close } from '@mui/icons-material'
+import Links from './Links'
 
 interface Props {
   message: MessageType
@@ -29,12 +30,11 @@ const Message: FC<Props> = ({ message, ticker }) => {
           <Close />
         </IconButton>
         <MessageModalDelete message={message} onClose={() => setDeleteModalOpen(false)} open={deleteModalOpen} />
-        <p
-          dangerouslySetInnerHTML={{
-            __html: message.text.replace(/(?:\r\n|\r|\n)/g, '<br/>'),
-          }}
-          style={{ paddingRight: theme.spacing(6) }}
-        />
+        {message.text.split(/\r\n|\r|\n/g).map((line, i) => (
+          <p key={message.id + i} style={{ paddingRight: theme.spacing(6) }}>
+            <Links message={line} />
+          </p>
+        ))}
         <MessageAttachements message={message} />
         <MessageMap message={message} ticker={ticker} />
         <MessageFooter message={message} />

yarn.lock

@@ -3535,6 +3535,16 @@ lines-and-columns@^1.1.6:
   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==
+
 local-pkg@^0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/local-pkg/-/local-pkg-0.5.0.tgz#093d25a346bae59a99f80e75f6e9d36d7e8c925c"