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..24013d7 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 => ( +

+ +

+ ))} 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"