-
Notifications
You must be signed in to change notification settings - Fork 50
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
176 additions
and
115 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| import { Trans } from 'react-i18next'; | ||
| import { ExternalLink } from 'shared/components/ExternalLink/ExternalLink'; | ||
|
|
||
| // TODO: change the name to something like: insertLinksToTranslation | ||
| export const processTranslation = text => { | ||
| let matches = []; | ||
| let result = getI18nVarLink(text); | ||
| matches = matches.concat(result.matches); | ||
| text = result.text; | ||
|
|
||
| result = getMdLink(text, matches.length); | ||
| text = result.text; | ||
| matches = matches.concat(result.matches); | ||
|
|
||
| result = getHTMLLinks(text, matches.length); | ||
| matches = matches.concat(result.matches); | ||
| text = result.text; | ||
|
|
||
| return { matches: matches ? matches : [], trans: text }; | ||
| }; | ||
|
|
||
| const getI18nVarLink = text => { | ||
| const i18VarRegex = /{{.*?}}/g; | ||
| let matchesIterator = text?.matchAll(i18VarRegex); | ||
| let matches = matchesIterator ? [...matchesIterator].flat() : null; | ||
|
|
||
| if (matches?.length) { | ||
| matches = matches.map((link, index) => { | ||
| const linkReplacement = processLink(link, index); | ||
| text = text.replace(link, linkReplacement); | ||
| return link.replace('{{', '').replace('}}', ''); | ||
| }); | ||
| } | ||
| return { matches, text }; | ||
| }; | ||
|
|
||
| const getMdLink = (text, globalIdx) => { | ||
| const mdLinkRegex = /\[([^\]]*)]\(([^)]*)\)/g; | ||
| let matchesIterator = text?.matchAll(mdLinkRegex); | ||
| let matches = matchesIterator ? [...matchesIterator] : null; | ||
|
|
||
| if (matches?.length) { | ||
| matches = matches.map((link, index) => { | ||
| const localIdx = index + globalIdx; | ||
| const linkReplacement = `<${localIdx}>${link[1]}</${localIdx}>`; | ||
| text = text.replace(link[0], linkReplacement); | ||
| return `(${link[2]})`; | ||
| }); | ||
| } | ||
| return { matches, text }; | ||
| }; | ||
|
|
||
| const getHTMLLinks = (text, globalIdx) => { | ||
| const httpRegex = /\bhttps?:\/\/\S*\b/g; | ||
| let matchesIterator = text?.matchAll(httpRegex); | ||
| let matches = matchesIterator ? [...matchesIterator].flat() : null; | ||
|
|
||
| if (matches?.length) { | ||
| matches = matches.map((link, index) => { | ||
| const idx = index + globalIdx; | ||
| const linkReplacement = `<${idx}>${link}</${idx}>`; | ||
| text = text.replace(link, linkReplacement); | ||
| return `(${link})`; | ||
| }); | ||
| } | ||
| return { matches, text }; | ||
| }; | ||
|
|
||
| export const createTranslationTextWithLinks = (text, t, i18n) => { | ||
| // const { t, i18n } = useGetTranslation(); | ||
| const { matches, trans: processedTrans } = processTranslation(text); | ||
| if (matches.length) { | ||
| return ( | ||
| <Trans | ||
| i18nKey={processedTrans} | ||
| i18n={i18n} | ||
| t={t} | ||
| components={matches.map((result, idx) => { | ||
| const url = result.match(/\((.*?)\)/)[1]; | ||
|
|
||
| return <ExternalLink url={url} key={idx} />; | ||
| })} | ||
| /> | ||
| ); | ||
| } else { | ||
| return processedTrans; | ||
| } | ||
| }; | ||
|
|
||
| const processLink = (link, index) => { | ||
| let linkText; | ||
| if (link.match(/\[(.*?)]/)) { | ||
| linkText = link.match(/\[(.*?)]/)[1]; | ||
| } else { | ||
| linkText = link.match(/\((.*?)\)/)[1]; | ||
| } | ||
| return `<${index}>${linkText}</${index}>`; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| import { processTranslation } from 'shared/helpers/linkExtractor'; | ||
|
|
||
| describe('process text with different link style', () => { | ||
| it('Markdown style links', () => { | ||
| //GIVEN | ||
| const text = `Welcome to [Kyma](kyma-project.io)`; | ||
|
|
||
| //WHEN | ||
| const result = processTranslation(text); | ||
|
|
||
| //THEN | ||
| expect(result.matches).toHaveLength(1); | ||
| expect(result.matches).toContain('(kyma-project.io)'); | ||
| }); | ||
|
|
||
| it('i18N variables Markdown style links', () => { | ||
| //GIVEN | ||
| const text = `Welcome to {{[Kyma](kyma-project.io)}}`; | ||
|
|
||
| //WHEN | ||
| const result = processTranslation(text); | ||
|
|
||
| //THEN | ||
| expect(result.matches).toHaveLength(1); | ||
| expect(result.matches).toContain('(kyma-project.io)'); | ||
| }); | ||
| it('Ordinary link with http and https', () => { | ||
| //GIVEN | ||
| const text = `Welcome to https://kyma-project.io or http://sap.com`; | ||
|
|
||
| //WHEN | ||
| const result = processTranslation(text); | ||
|
|
||
| //THEN | ||
| expect(result.matches).toHaveLength(2); | ||
| expect(result.matches).toContain('(https://kyma-project.io)'); | ||
| expect(result.matches).toContain('(http://sap.com)'); | ||
| }); | ||
|
|
||
| it('Different link types mixed together', () => { | ||
| //GIVEN | ||
| const text = `Welcome to https://kyma-project.io. | ||
| [Here](https://kyma-project.io/#/02-get-started/01-quick-install) you can find more information about installing kyma. | ||
| If you have any problem you can try to reach {{[community](https://pages.community.sap.com/topics/kyma)}} | ||
| Get familiar with other product at http://sap.com`; | ||
|
|
||
| //WHEN | ||
| const result = processTranslation(text); | ||
|
|
||
| //THEN | ||
| expect(result.matches).toHaveLength(4); | ||
| expect(result.matches).toContain('(https://kyma-project.io)'); | ||
| expect(result.matches).toContain('(http://sap.com)'); | ||
| expect(result.matches).toContain( | ||
| '(https://kyma-project.io/#/02-get-started/01-quick-install)', | ||
| ); | ||
| expect(result.matches).toContain( | ||
| '(https://pages.community.sap.com/topics/kyma)', | ||
| ); | ||
| }); | ||
| }); | ||
|
|
||
| describe('No links', () => {}); |