diff --git a/package.json b/package.json
index e0fe8a4..7c3e994 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/message/Links.test.tsx b/src/components/message/Links.test.tsx
new file mode 100644
index 0000000..5f86b0b
--- /dev/null
+++ b/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()
+
+ 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()
+
+ 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...')
+ })
+})
diff --git a/src/components/message/Links.tsx b/src/components/message/Links.tsx
new file mode 100644
index 0000000..651ddb7
--- /dev/null
+++ b/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 = ({ 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 (
+
+ {content}
+
+ )
+ }
+
+ return {message}
+}
+
+export default Links
diff --git a/src/components/message/Message.tsx b/src/components/message/Message.tsx
index f68df1f..0cc291c 100644
--- a/src/components/message/Message.tsx
+++ b/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 = ({ message, ticker }) => {
setDeleteModalOpen(false)} open={deleteModalOpen} />
- '),
- }}
- style={{ paddingRight: theme.spacing(6) }}
- />
+ {message.text.split(/\r\n|\r|\n/g).map((line, i) => (
+
+
+
+ ))}
diff --git a/yarn.lock b/yarn.lock
index d132453..2289a87 100644
--- a/yarn.lock
+++ b/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"