Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(viewer): recognise URLs in text value and convert into link (DSP…
…-1595) (#315) * feat(action): new pipe to recognize urls in a string * feat(viewer): use linkify pipe in text and html values * test(viewer): fix tests with linkify pipe * chore(action): expand linkify pipe * chore(action): fix some typos and refactor code * chore(action): fix typo
- Loading branch information
1 parent
fa4950e
commit f08b50d
Showing
10 changed files
with
273 additions
and
155 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
32 changes: 32 additions & 0 deletions
32
projects/dsp-ui/src/lib/action/pipes/string-transformation/linkify.pipe.spec.ts
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,32 @@ | ||
| import { LinkifyPipe } from './linkify.pipe'; | ||
|
|
||
| describe('LinkifyPipe', () => { | ||
|
|
||
| let pipe: LinkifyPipe; | ||
|
|
||
| beforeEach(() => { | ||
| pipe = new LinkifyPipe(); | ||
| }); | ||
|
|
||
| it('create an instance', () => { | ||
| expect(pipe).toBeTruthy(); | ||
| }); | ||
|
|
||
| it('should recognize the url without protocol but with hashtag at the end', () => { | ||
| const text = 'You can visit the app on app.dasch.swiss/#'; | ||
| const linkifiedSnippet = pipe.transform(text); | ||
| expect(linkifiedSnippet).toEqual('You can visit the app on <a href="http://app.dasch.swiss/#" target="_blank">app.dasch.swiss/#</a>'); | ||
| }); | ||
|
|
||
| it('should recognize the url with protocol followed by full stop', () => { | ||
| const text = 'You can visit the app on https://app.dasch.swiss.'; | ||
| const linkifiedSnippet = pipe.transform(text); | ||
| expect(linkifiedSnippet).toEqual('You can visit the app on <a href="https://app.dasch.swiss" target="_blank">https://app.dasch.swiss</a>.'); | ||
| }); | ||
|
|
||
| it('should recognize both urls in the example text', () => { | ||
| const text = 'You can visit the app on https://app.dasch.swiss and the documentation on docs.dasch.swiss.'; | ||
| const linkifiedSnippet = pipe.transform(text); | ||
| expect(linkifiedSnippet).toEqual('You can visit the app on <a href="https://app.dasch.swiss" target="_blank">https://app.dasch.swiss</a> and the documentation on <a href="http://docs.dasch.swiss" target="_blank">docs.dasch.swiss</a>.'); | ||
| }); | ||
| }); |
57 changes: 57 additions & 0 deletions
57
projects/dsp-ui/src/lib/action/pipes/string-transformation/linkify.pipe.ts
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,57 @@ | ||
| import { Pipe, PipeTransform } from '@angular/core'; | ||
|
|
||
| /** | ||
| * This pipe analyses a string and converts any url into a href tag | ||
| * | ||
| */ | ||
| @Pipe({ | ||
| name: 'dspLinkify' | ||
| }) | ||
| export class LinkifyPipe implements PipeTransform { | ||
|
|
||
| transform(value: string): string { | ||
| let stylizedText: string = ''; | ||
| if (value && value.length > 0) { | ||
| for (let str of value.split(' ')) { | ||
| // if string/url ends with a full stop '.' or colon ':' or comma ',' or semicolon ';' the pipe will not recognize the url | ||
| const lastChar = str.substring(str.length - 1); | ||
| const endsWithFullStop = (lastChar === '.' || lastChar === ':' || lastChar === ',' || lastChar === ';'); | ||
| let end = ' '; | ||
| if (endsWithFullStop) { | ||
| str = str.slice(0, -1); | ||
| end = '.' | ||
| } | ||
| if (this._recognizeUrl(str)) { | ||
| const url = this._setProtocol(str); | ||
| stylizedText += `<a href="${url}" target="_blank">${str}</a>${end}`; | ||
| } else { | ||
| stylizedText += str + end; | ||
| } | ||
| } | ||
| return stylizedText.trim(); | ||
| } else { | ||
| return value; | ||
| } | ||
| } | ||
|
|
||
| private _recognizeUrl(str: string): boolean { | ||
| const pattern = new RegExp( | ||
| '^(https?:\\/\\/)?' + // protocol | ||
| '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name | ||
| '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address | ||
| '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path | ||
| '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string | ||
| '(\\#[-a-z\\d_]*)?$', | ||
| 'i' | ||
| ); // fragment locator | ||
| return pattern.test(str); | ||
| } | ||
|
|
||
| private _setProtocol(url: string): string { | ||
| if (!/^(?:f|ht)tps?\:\/\//.test(url)) { | ||
| url = 'http://' + url; | ||
| } | ||
| return url; | ||
| } | ||
|
|
||
| } |
2 changes: 1 addition & 1 deletion
2
...-ui/src/lib/viewer/values/text-value/text-value-as-html/text-value-as-html.component.html
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 |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| <div [innerHTML]="htmlFromKnora" class="value"></div> | ||
| <div [innerHTML]="htmlFromKnora | dspLinkify" class="value"></div> | ||
| <div *ngIf="comment"> | ||
| <label>{{commentLabel}}: </label><span class="comment">{{comment}}</span> | ||
| </div> |
Oops, something went wrong.