From fa6c28bf8bc86f558f8c71ecadbf7629f85c9344 Mon Sep 17 00:00:00 2001 From: louis Date: Sun, 28 Apr 2024 16:04:27 +0200 Subject: [PATCH] Use only Linkify for replace the links --- package.json | 6 ++-- src/components/Message.tsx | 30 +++++++++++++----- yarn.lock | 64 ++++---------------------------------- 3 files changed, 31 insertions(+), 69 deletions(-) diff --git a/package.json b/package.json index 143e370..9788f1f 100644 --- a/package.json +++ b/package.json @@ -18,9 +18,8 @@ "@types/react-helmet": "^6.1.11", "@types/styled-components": "^5.1.34", "dayjs": "^1.11.10", - "html-react-parser": "^5.1.10", "leaflet": "^1.9.4", - "linkify-html": "^4.1.3", + "linkify-react": "^4.1.3", "linkifyjs": "^4.1.3", "pure-react-carousel": "^1.30.1", "react": "^18.2.0", @@ -59,5 +58,6 @@ "vite": "^5.2.7", "vitest": "^1.4.0", "vitest-fetch-mock": "^0.2.2" - } + }, + "packageManager": "yarn@1.22.19" } diff --git a/src/components/Message.tsx b/src/components/Message.tsx index faeb6da..8c81681 100644 --- a/src/components/Message.tsx +++ b/src/components/Message.tsx @@ -7,8 +7,7 @@ import localizedFormat from 'dayjs/plugin/localizedFormat' import Attachments from './Attachments' import styled from 'styled-components' import Map from './Map' -import linkifyHtml from 'linkify-html' -import parse from 'html-react-parser' +import Linkify from 'linkify-react' dayjs.extend(relativeTime) dayjs.extend(localizedFormat) @@ -30,17 +29,32 @@ const Message: FC = props => { ) const creationDate = dayjs(props.message.createdAt).format('LLLL') - const decorateText = (text: string) => { - // replace newlines - text = text.replace(/\r\n|\r|\n/g, '
') - // turn URLs into links - return linkifyHtml(text, { defaultProtocol: 'https' }) + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const renderLink = ({ attributes, content }: { attributes: any; content: string }) => { + const { href } = attributes + if (content.startsWith('http')) { + content = content.replace(/^(https?:\/\/)/, '') + } + + if (content.endsWith('/')) { + content = content.slice(0, -1) + } + + return ( + + {content} + + ) } return ( -
{parse(decorateText(props.message.text))}
+ {props.message.text.split(/\r\n|\r|\n/g).map(line => ( +

+ {line} +

+ ))} {props.message.attachments && ( diff --git a/yarn.lock b/yarn.lock index ebc1102..e4c4e2a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1913,14 +1913,14 @@ domelementtype@^2.3.0: resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d" integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw== -domhandler@5.0.3, domhandler@^5.0.2, domhandler@^5.0.3: +domhandler@^5.0.2, domhandler@^5.0.3: version "5.0.3" resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31" integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w== dependencies: domelementtype "^2.3.0" -domutils@^3.0.1, domutils@^3.1.0: +domutils@^3.0.1: version "3.1.0" resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.1.0.tgz#c47f551278d3dc4b0b1ab8cbb42d751a6f0d824e" integrity sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA== @@ -1939,7 +1939,7 @@ electron-to-chromium@^1.4.668: resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.690.tgz#dd5145d45c49c08a9a6f7454127e660bdf9a3fa7" integrity sha512-+2OAGjUx68xElQhydpcbqH50hE8Vs2K6TkAeLhICYfndb67CVH0UsZaijmRUE3rHlIxU1u0jxwhgVe6fK3YANA== -entities@^4.2.0, entities@^4.4.0, entities@^4.5.0: +entities@^4.2.0, entities@^4.4.0: version "4.5.0" resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48" integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw== @@ -2810,14 +2810,6 @@ hoist-non-react-statics@^3.3.0: dependencies: react-is "^16.7.0" -html-dom-parser@5.0.8: - version "5.0.8" - resolved "https://registry.yarnpkg.com/html-dom-parser/-/html-dom-parser-5.0.8.tgz#540057d8eb7ff28c9fd45fa9eead374c34dae20c" - integrity sha512-vuWiX9EXgu8CJ5m9EP5c7bvBmNSuQVnrY8tl0z0ZX96Uth1IPlYH/8W8VZ/hBajFf18EN+j2pukbCNd01HEd1w== - dependencies: - domhandler "5.0.3" - htmlparser2 "9.1.0" - html-encoding-sniffer@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz#696df529a7cfd82446369dc5193e590a3735b448" @@ -2830,31 +2822,11 @@ html-escaper@^2.0.0: resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453" integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg== -html-react-parser@^5.1.10: - version "5.1.10" - resolved "https://registry.yarnpkg.com/html-react-parser/-/html-react-parser-5.1.10.tgz#e65bf68df9b505756680d2cae842f7add3da5305" - integrity sha512-gV22PvLij4wdEdtrZbGVC7Zy2OVWnQ0bYhX63S196ZRSx4+K0TuutCreHSXr+saUia8KeKB+2TYziVfijpH4Tw== - dependencies: - domhandler "5.0.3" - html-dom-parser "5.0.8" - react-property "2.0.2" - style-to-js "1.1.12" - html-url-attributes@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/html-url-attributes/-/html-url-attributes-3.0.0.tgz#fc4abf0c3fb437e2329c678b80abb3c62cff6f08" integrity sha512-/sXbVCWayk6GDVg3ctOX6nxaVj7So40FcFAnWlWGNAB1LpYKcV5Cd10APjPjW80O7zYW2MsjBV4zZ7IZO5fVow== -htmlparser2@9.1.0: - version "9.1.0" - resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-9.1.0.tgz#cdb498d8a75a51f739b61d3f718136c369bc8c23" - integrity sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ== - dependencies: - domelementtype "^2.3.0" - domhandler "^5.0.3" - domutils "^3.1.0" - entities "^4.5.0" - http-proxy-agent@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-7.0.0.tgz#e9096c5afd071a3fce56e6252bb321583c124673" @@ -2924,11 +2896,6 @@ inline-style-parser@0.2.2: resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.2.2.tgz#d498b4e6de0373458fc610ff793f6b14ebf45633" integrity sha512-EcKzdTHVe8wFVOGEYXiW9WmJXPjqi1T+234YpJr98RiFYKHV3cdy1+3mkTE+KHTHxFFLH51SfaGOoUdW+v7ViQ== -inline-style-parser@0.2.3: - version "0.2.3" - resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.2.3.tgz#e35c5fb45f3a83ed7849fe487336eb7efa25971c" - integrity sha512-qlD8YNDqyTKTyuITrDOffsl6Tdhv+UC4hcdAVuQsK4IMQ99nSgd1MIA/Q+jQYoh9r3hVUXhYh7urSRmXPkW04g== - internal-slot@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.3.tgz#7347e307deeea2faac2ac6205d4bc7d34967f59c" @@ -3455,10 +3422,10 @@ lilconfig@^3.1.1: resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-3.1.1.tgz#9d8a246fa753106cfc205fd2d77042faca56e5e3" integrity sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ== -linkify-html@^4.1.3: +linkify-react@^4.1.3: version "4.1.3" - resolved "https://registry.yarnpkg.com/linkify-html/-/linkify-html-4.1.3.tgz#c4aea1df324ef70562f290b82ecbf1fb50c7a27c" - integrity sha512-Ejb8X/pOxB4IVqG1U37tnF85UW3JtX+eHudH3zlZ2pODz2e/J7zQ/vj+VDWffwhTecJqdRehhluwrRmKoJz+iQ== + 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" @@ -4643,11 +4610,6 @@ react-popper@^2.3.0: react-fast-compare "^3.0.1" warning "^4.0.2" -react-property@2.0.2: - version "2.0.2" - resolved "https://registry.yarnpkg.com/react-property/-/react-property-2.0.2.tgz#d5ac9e244cef564880a610bc8d868bd6f60fdda6" - integrity sha512-+PbtI3VuDV0l6CleQMsx2gtK0JZbZKbpdu5ynr+lbsuvtmgbNcS3VM0tuY2QjFNOcWxvXeHjDpy42RO+4U2rug== - react-refresh@^0.14.0: version "0.14.0" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e" @@ -5160,20 +5122,6 @@ strip-literal@^2.0.0: dependencies: js-tokens "^8.0.2" -style-to-js@1.1.12: - version "1.1.12" - resolved "https://registry.yarnpkg.com/style-to-js/-/style-to-js-1.1.12.tgz#112dd054231e71643514013a4475d4649bb2b581" - integrity sha512-tv+/FkgNYHI2fvCoBMsqPHh5xovwiw+C3X0Gfnss/Syau0Nr3IqGOJ9XiOYXoPnToHVbllKFf5qCNFJGwFg5mg== - dependencies: - style-to-object "1.0.6" - -style-to-object@1.0.6: - version "1.0.6" - resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-1.0.6.tgz#0c28aed8be1813d166c60d962719b2907c26547b" - integrity sha512-khxq+Qm3xEyZfKd/y9L3oIWQimxuc4STrQKtQn8aSDRHb8mFgpukgX1hdzfrMEW6JCjyJ8p89x+IUMVnCBI1PA== - dependencies: - inline-style-parser "0.2.3" - style-to-object@^1.0.0: version "1.0.5" resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-1.0.5.tgz#5e918349bc3a39eee3a804497d97fcbbf2f0d7c0"