Merge pull request #571 from systemli/feat/linkify

✨ Linkify URLs when rendering text messages

package.json

@@ -19,6 +19,8 @@
     "@types/styled-components": "^5.1.34",
     "dayjs": "^1.11.11",
     "leaflet": "^1.9.4",
+    "linkify-react": "^4.1.3",
+    "linkifyjs": "^4.1.3",
     "pure-react-carousel": "^1.30.1",
     "react": "^18.3.1",
     "react-app-polyfill": "^3.0.0",
@@ -56,5 +58,6 @@
     "vite": "^5.2.7",
     "vitest": "^1.4.0",
     "vitest-fetch-mock": "^0.2.2"
-  }
+  },
+  "packageManager": "[email protected]"
 }

src/components/Links.test.tsx

@@ -0,0 +1,34 @@
+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 render links without protocol', () => {
+    const message = '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-sic...')
+  })
+})

src/components/Links.tsx

@@ -0,0 +1,23 @@
+import Linkify from 'linkify-react'
+import { FC } from 'react'
+
+interface Props {
+  message: string
+}
+const Links: FC<Props> = ({ message }) => {
+  const render = ({ attributes }: { attributes: unknown }) => {
+    const { href } = attributes as { href: string }
+    const url = new URL(href)
+    const content = url.hostname + url.pathname.slice(0, 20) + '...'
+
+    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.tsx

@@ -7,6 +7,7 @@ import localizedFormat from 'dayjs/plugin/localizedFormat'
 import Attachments from './Attachments'
 import styled from 'styled-components'
 import Map from './Map'
+import Links from './Links'
 
 dayjs.extend(relativeTime)
 dayjs.extend(localizedFormat)
@@ -31,11 +32,11 @@ const Message: FC<Props> = props => {
   return (
     <Card fluid>
       <CardContent>
-        <div
-          dangerouslySetInnerHTML={{
-            __html: props.message.text.replace(/(?:\r\n|\r|\n)/g, '<br/>'),
-          }}
-        />
+        {props.message.text.split(/\r\n|\r|\n/g).map((line, i) => (
+          <p key={props.message.id + i}>
+            <Links message={line} />
+          </p>
+        ))}
       </CardContent>
       {props.message.attachments && (
         <AttachmentsWrapper>

tsconfig.json

@@ -5,6 +5,7 @@
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
+    "types": ["vitest/globals", "@testing-library/jest-dom"],
 
     /* Bundler mode */
     "moduleResolution": "bundler",

yarn.lock

@@ -3422,6 +3422,16 @@ lilconfig@^3.1.1:
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-3.1.1.tgz#9d8a246fa753106cfc205fd2d77042faca56e5e3"
   integrity sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==
 
+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"