diff --git a/frontend/package.json b/frontend/package.json index 3cac02c3d4c..684fd6f06b0 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -98,7 +98,7 @@ "^.+\\.(gql|graphql)$": "jest-transform-graphql" }, "transformIgnorePatterns": [ - "/node_modules/(?!(@patternfly|lodash-es|@console|@novnc|@spice-project|@popperjs|i18next\\S*?)/.*)" + "/node_modules/(?!(@patternfly|lodash-es|@console|@novnc|@spice-project|@popperjs|i18next\\S*?|linkify-react)/.*)" ], "testPathIgnorePatterns": [ "/node_modules/", @@ -181,6 +181,8 @@ "js-base64": "^2.5.1", "js-yaml": "^3.13.1", "json-schema": "^0.3.0", + "linkify-react": "^4.2.0", + "linkifyjs": "^4.2.0", "lodash-es": "^4.17.23", "monaco-languageclient": "^0.13.0", "murmurhash-js": "1.0.x", @@ -197,7 +199,6 @@ "react-draggable": "4.x", "react-helmet": "^6.1.0", "react-i18next": "^11.7.3", - "react-linkify": "^0.2.2", "react-measure": "^2.2.6", "react-modal": "^3.12.1", "react-monaco-editor": "0.41.x", diff --git a/frontend/public/components/utils/link.tsx b/frontend/public/components/utils/link.tsx index adcc0563b93..692023b21e8 100644 --- a/frontend/public/components/utils/link.tsx +++ b/frontend/public/components/utils/link.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import * as classNames from 'classnames'; -import Linkify from 'react-linkify'; +import Linkify from 'linkify-react/dist/linkify-react.mjs'; +import type { IntermediateRepresentation, Opts } from 'linkifyjs'; import { useTranslation } from 'react-i18next'; import { CopyToClipboard as CTC } from 'react-copy-to-clipboard'; import { Tooltip } from '@patternfly/react-core'; @@ -131,9 +132,23 @@ export const ExternalLinkWithCopy: React.FC = ({ ); }; +const linkifyOptions: Opts = { + render: ({ attributes, content }: IntermediateRepresentation) => { + const { href, ...props } = attributes; + return ( + + {content} + + ); + }, + validate: { + url: (value: string) => /^https?:\/\//.test(value), + }, +}; + // Open links in a new window and set noopener/noreferrer. export const LinkifyExternal: React.FC<{ children: React.ReactNode }> = ({ children }) => ( - {children} + {children} ); LinkifyExternal.displayName = 'LinkifyExternal'; diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 4bdd28fbfb5..d36ad9ab59f 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -18086,12 +18086,20 @@ __metadata: languageName: node linkType: hard -"linkify-it@npm:^2.0.3": - version: 2.1.0 - resolution: "linkify-it@npm:2.1.0" - dependencies: - uc.micro: "npm:^1.0.1" - checksum: 10c0/2fc45f06740a3c58c3393eecb634f91b62afc8b571ec82dd4fb250acded2d15ab1c83730c0fc0c353b8577d594384c7ca9e7f075be4342e9238d41089d0001bf +"linkify-react@npm:^4.2.0": + version: 4.3.3 + resolution: "linkify-react@npm:4.3.3" + peerDependencies: + linkifyjs: "*" + react: ">= 15.0.0" + checksum: 10c0/67885ea9466003cdd1c7c8bbecbc9fb5f903bde93bb3333bab1e61f12b76af93ba0bc40c7d9f0be3751e48d1dd1a10e3b0499691bfc8a249ef3267e62b03770e + languageName: node + linkType: hard + +"linkifyjs@npm:^4.2.0": + version: 4.3.3 + resolution: "linkifyjs@npm:4.3.3" + checksum: 10c0/0eac293927f1465d13625c8c67c83c50d7fda9137c255a4a2ff5970ea4e9ba57de4846b170326e54b9e4e82be24f3705572bc50773737be9b13af5f1e4577798 languageName: node linkType: hard @@ -20620,6 +20628,8 @@ __metadata: js-base64: "npm:^2.5.1" js-yaml: "npm:^3.13.1" json-schema: "npm:^0.3.0" + linkify-react: "npm:^4.2.0" + linkifyjs: "npm:^4.2.0" lint-staged: "npm:^10.2.2" lodash-es: "npm:^4.17.23" mini-css-extract-plugin: "npm:^1.6.2" @@ -20651,7 +20661,6 @@ __metadata: react-draggable: "npm:4.x" react-helmet: "npm:^6.1.0" react-i18next: "npm:^11.7.3" - react-linkify: "npm:^0.2.2" react-measure: "npm:^2.2.6" react-modal: "npm:^3.12.1" react-monaco-editor: "npm:0.41.x" @@ -22543,17 +22552,6 @@ __metadata: languageName: node linkType: hard -"react-linkify@npm:^0.2.2": - version: 0.2.2 - resolution: "react-linkify@npm:0.2.2" - dependencies: - linkify-it: "npm:^2.0.3" - prop-types: "npm:^15.5.8" - tlds: "npm:^1.57.0" - checksum: 10c0/d288311b7f82baa81b9e90d52699c8b1ffbc7a45ebc05a8dd9a935d7662999c9a70818de67803e18c501ae0ff58185d50954101692a2af6bbc76285450a7c8b6 - languageName: node - linkType: hard - "react-measure@npm:^2.2.6": version: 2.3.0 resolution: "react-measure@npm:2.3.0" @@ -26023,15 +26021,6 @@ __metadata: languageName: node linkType: hard -"tlds@npm:^1.57.0": - version: 1.203.1 - resolution: "tlds@npm:1.203.1" - bin: - tlds: bin.js - checksum: 10c0/58f630ec673add064b0cdd3ba675ac23eabe33523a2629cfae6ea31de109503e1c3889bc128625b810855149945ccbdf4b904c38839780c3afab71e604523204 - languageName: node - linkType: hard - "tmp@npm:0.0.30": version: 0.0.30 resolution: "tmp@npm:0.0.30" @@ -26615,13 +26604,6 @@ __metadata: languageName: node linkType: hard -"uc.micro@npm:^1.0.1": - version: 1.0.6 - resolution: "uc.micro@npm:1.0.6" - checksum: 10c0/9bde2afc6f2e24b899db6caea47dae778b88862ca76688d844ef6e6121dec0679c152893a74a6cfbd2e6fde34654e6bd8424fee8e0166cdfa6c9ae5d42b8a17b - languageName: node - linkType: hard - "uglify-js@npm:3.3.x": version: 3.3.16 resolution: "uglify-js@npm:3.3.16"