From 6009a70f78ee25078d722e6954cab32b756cbded Mon Sep 17 00:00:00 2001 From: Anthony Nahas Date: Sat, 15 Dec 2018 15:52:29 +0200 Subject: [PATCH 01/11] docs(project): added angular (ngx-linkifyjs) documentation for linkifyjs --- docs/linkify-angular-ts.md | 251 +++++++++++++++++++++++++++++++++++++ 1 file changed, 251 insertions(+) create mode 100644 docs/linkify-angular-ts.md diff --git a/docs/linkify-angular-ts.md b/docs/linkify-angular-ts.md new file mode 100644 index 00000000..5ba62fcd --- /dev/null +++ b/docs/linkify-angular-ts.md @@ -0,0 +1,251 @@ +--- +layout: doc +title: [ngx-linkifyjs](https://github.com/AnthonyNahas/ngx-linkifyjs) · Documentation +--- + +`ngx-linkifyjs` is an angular V7 wrapper for linkifyjs - library for finding links in plain text and converting them +to HTML tags via linkifyjs and more <3 + +#### Jump to + +* [Demo](#demo) +* [Installation](#installation) +* [Usage](#usage) + * [Pipe](#pipe) `NgxLinkifyjsPipe via | linkify` + * [Service](#service) `NgxLinkifyjsService` + * [Methods](#methods) + * [linkify _(text: string): string_](#linkify_method) + * [find](#find_method) + * [test](#test_method) + * [Configuration](#configuration) +* [Documentation](#documentation) + + +## Demo + +View all the directives in action at [https://anthonynahas.github.io/ngx-linkifyjs](https://anthonynahas.github.io/ngx-linkifyjs) + +## Installation + + +Install above dependencies via *npm*. + +Now install `ngx-linkifyjs` via: +```shell +npm i -s ngx-linkifyjs +``` + +--- +##### SystemJS +>**Note**:If you are using `SystemJS`, you should adjust your configuration to point to the UMD bundle. +In your systemjs config file, `map` needs to tell the System loader where to look for `ngx-linkifyjs`: +```js +map: { + 'ngx-linkifyjs': 'node_modules/ngx-linkifyjs/bundles/ngx-linkifyjs.umd.js', +} +``` +--- + +Once installed you need to import the main module: +```js +import { NgxLinkifyjsModule } from 'ngx-linkifyjs'; +``` +The only remaining part is to list the imported module in your application module. The exact method will be slightly +different for the root (top-level) module for which you should end up with the code similar to (notice ` NgxLinkifyjsModule .forRoot()`): +```typescript +import { NgxLinkifyjsModule } from 'ngx-linkifyjs'; + +@NgModule({ + declarations: [AppComponent, ...], + imports: [NgxLinkifyjsModule.forRoot(), ...], + bootstrap: [AppComponent] +}) +export class AppModule { +} +``` + +Other modules in your application can simply import ` NgxLinkifyjsModule `: + +```js +import { NgxLinkifyjsModule } from 'ngx-linkifyjs'; + +@NgModule({ + declarations: [OtherComponent, ...], + imports: [NgxLinkifyjsModule, ...], +}) +export class OtherModule { +} +``` + + +## Usage + + +Once the library is imported, you can use its components, directives and pipes in your Angular application: + +### Pipe + +`{{text | linkify}}` + +```html + +``` + +**result**: Linkify the following URL: [https://github.com/anthonynahas/ngx-linkifyjs](https://github.com/anthonynahas/ngx-linkifyjs) and share it <3 + +### Service + +Inject the `NgxLinkifyjsService` service + +```typescript +import {NgxLinkifyjsService, Link, LinkType} from 'ngx-linkifyjs'; + +constructor(public linkifyService: NgxLinkifyjsService) { + } +} +``` + +#### Methods + + + +#### linkify _(text: string): string_ + +Convert a basic text string to a valid linkified text + +**Params** + +* **`text`** : _`String`_ Text to linkify --> to convert with links + +**Returns** _`String`_ converted text with links + + +```typescript +import {NgxLinkifyjsService, Link, LinkType} from 'ngx-linkifyjs'; + +constructor(public linkifyService: NgxLinkifyjsService) { + this.linkifyService.linkify('For help with GitHub.com, please email support@github.com'); + // result --> see below + } +} +``` + +```typescript +'For help with GitHub.com, please email support@github.com' +``` + + + +#### find _(text: string): Array_ + +Finds all links in the given string + +**Params** + +* **`text`** : _`String`_ search text string + +**Returns** _`Array`_ List of links where each element is a hash with properties type, value, and href: + + +* **type** is the type of entity found. Possible values are + - `'url'` + - `'email'` + - `'hashtag'` (if Hashtag is enabled via config/default `true`) + - `'mention'` (if Mention is enabled via config/default `true`) +* **value** is the original entity substring. +* **href** should be the value of this link's `href` attribute. + +```typescript +import {Component, OnInit} from '@angular/core'; +import {NgxLinkifyjsService, Link, LinkType} from 'ngx-linkifyjs'; + +@Component({ + selector: 'app-home', + templateUrl: './home.component.html', + styleUrls: ['./home.component.scss'] +}) +export class HomeComponent { + + constructor(public linkifyService: NgxLinkifyjsService) { + const foundLinks: Link[] = this.linkifyService.find('Any links to github.com here? If not, contact test@example.com'); + + // result - output --> see below + } + +} +``` + +```typescript +// Result +[ + { + type: LinkType.URL, + value: 'github.com', + href: 'http://github.com' + }, + { + type: LinkType.EMAIL, + value: 'test@example.com', + href: 'mailto:test@example.com' + } +] +``` + + + +#### test _(value: string | string[]: boolean_ + +Is the given string a link? Not to be used for strict validation - See [Caveats](caveats.html) + +**Params** + +* **`value`** : _`String`_ | _`Array`_ Test string + +**Returns** _`Boolean`_ + + +```typescript +import {Component, OnInit} from '@angular/core'; +import {NgxLinkifyjsService} from 'ngx-linkifyjs'; + +@Component({ + selector: 'app-home', + templateUrl: './home.component.html', + styleUrls: ['./home.component.scss'] +}) +export class HomeComponent { + + constructor(public linkifyService: NgxLinkifyjsService) { + this.linkifyService.test('github.com'); // return true + this.linkifyService.test('dev@example.com'); // return true + this.linkifyService.test(['github.com', 'email']); // return false + this.linkifyService.test('helloWorld'); // return false + } +} +``` + +#### Configuration + + +Enable/Disable the hash and mention + +The config argument is 100% optional, otherwise we will take the default values `true` + +```typescript +import { NgxLinkifyjsModule } from 'ngx-linkifyjs'; + +@NgModule({ + declarations: [AppComponent, ...], + imports: [NgxLinkifyjsModule.forRoot( + { + enableHash: false, // optional - default true + enableMention: false // optional - default true + }), ...], + bootstrap: [AppComponent] +}) +export class AppModule { +} +``` + +take a look @ [@angular-material-extensions/link-preview](https://github.com/angular-material-extensions/link-preview) which is using `ngx-linkifyjs` + From cd58c0c29c59a408692c99389286bf4ae9817098 Mon Sep 17 00:00:00 2001 From: Nick Frasser Date: Sun, 3 Feb 2019 00:19:55 +0100 Subject: [PATCH 02/11] minor update in the angular docs Co-Authored-By: AnthonyNahas --- docs/linkify-angular-ts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/linkify-angular-ts.md b/docs/linkify-angular-ts.md index 5ba62fcd..98159258 100644 --- a/docs/linkify-angular-ts.md +++ b/docs/linkify-angular-ts.md @@ -1,6 +1,6 @@ --- layout: doc -title: [ngx-linkifyjs](https://github.com/AnthonyNahas/ngx-linkifyjs) · Documentation +title: ngx-linkifyjs · Documentation --- `ngx-linkifyjs` is an angular V7 wrapper for linkifyjs - library for finding links in plain text and converting them From b0d5b404ee2d80f8baec1d102b586bc76b2e9371 Mon Sep 17 00:00:00 2001 From: Nick Frasser Date: Sun, 3 Feb 2019 00:20:14 +0100 Subject: [PATCH 03/11] minor update in the angular docs Co-Authored-By: AnthonyNahas --- docs/linkify-angular-ts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/linkify-angular-ts.md b/docs/linkify-angular-ts.md index 98159258..d30bc416 100644 --- a/docs/linkify-angular-ts.md +++ b/docs/linkify-angular-ts.md @@ -4,7 +4,7 @@ title: ngx-linkifyjs · Documentation --- `ngx-linkifyjs` is an angular V7 wrapper for linkifyjs - library for finding links in plain text and converting them -to HTML tags via linkifyjs and more <3 +to HTML <a> tags via linkifyjs and more <3. #### Jump to From f7717ffec765183b296a10f46b91b8fe1ade0560 Mon Sep 17 00:00:00 2001 From: Nick Frasser Date: Sun, 3 Feb 2019 00:20:29 +0100 Subject: [PATCH 04/11] minor update in the angular docs Co-Authored-By: AnthonyNahas --- docs/linkify-angular-ts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/linkify-angular-ts.md b/docs/linkify-angular-ts.md index d30bc416..5ec3c7af 100644 --- a/docs/linkify-angular-ts.md +++ b/docs/linkify-angular-ts.md @@ -193,7 +193,7 @@ export class HomeComponent { -#### test _(value: string | string[]: boolean_ +#### test _(value: string | string[]): boolean_ Is the given string a link? Not to be used for strict validation - See [Caveats](caveats.html) From c996a808453ec12461b8c029bf7c0f685a18fa22 Mon Sep 17 00:00:00 2001 From: Nick Frasser Date: Sun, 3 Feb 2019 00:20:34 +0100 Subject: [PATCH 05/11] minor update in the angular docs Co-Authored-By: AnthonyNahas --- docs/linkify-angular-ts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/linkify-angular-ts.md b/docs/linkify-angular-ts.md index 5ec3c7af..bb8694c3 100644 --- a/docs/linkify-angular-ts.md +++ b/docs/linkify-angular-ts.md @@ -142,7 +142,7 @@ Finds all links in the given string **Params** -* **`text`** : _`String`_ search text string +* **text** : _`String`_ search text string **Returns** _`Array`_ List of links where each element is a hash with properties type, value, and href: From 3212c55a2f20a982e7e526686358818c7f2f58ea Mon Sep 17 00:00:00 2001 From: Nick Frasser Date: Sun, 3 Feb 2019 00:20:40 +0100 Subject: [PATCH 06/11] minor update in the angular docs Co-Authored-By: AnthonyNahas --- docs/linkify-angular-ts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/linkify-angular-ts.md b/docs/linkify-angular-ts.md index bb8694c3..f95c29f1 100644 --- a/docs/linkify-angular-ts.md +++ b/docs/linkify-angular-ts.md @@ -227,7 +227,7 @@ export class HomeComponent { #### Configuration -Enable/Disable the hash and mention +Enable/Disable the hash and mention. The config argument is 100% optional, otherwise we will take the default values `true` From f6cfc3e21977d620b7e6cc1d29d5ed77a6981b48 Mon Sep 17 00:00:00 2001 From: Nick Frasser Date: Sun, 3 Feb 2019 00:20:44 +0100 Subject: [PATCH 07/11] minor update in the angular docs Co-Authored-By: AnthonyNahas --- docs/linkify-angular-ts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/linkify-angular-ts.md b/docs/linkify-angular-ts.md index f95c29f1..6fc146af 100644 --- a/docs/linkify-angular-ts.md +++ b/docs/linkify-angular-ts.md @@ -229,7 +229,7 @@ export class HomeComponent { Enable/Disable the hash and mention. -The config argument is 100% optional, otherwise we will take the default values `true` +The config argument is optional (defaults to `true`). ```typescript import { NgxLinkifyjsModule } from 'ngx-linkifyjs'; From 434daad9d873ab3c705689ab0df22f1ac9d08668 Mon Sep 17 00:00:00 2001 From: Nick Frasser Date: Sun, 3 Feb 2019 00:20:53 +0100 Subject: [PATCH 08/11] minor update in the angular docs Co-Authored-By: AnthonyNahas --- docs/linkify-angular-ts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/linkify-angular-ts.md b/docs/linkify-angular-ts.md index 6fc146af..385cb8a5 100644 --- a/docs/linkify-angular-ts.md +++ b/docs/linkify-angular-ts.md @@ -199,7 +199,7 @@ Is the given string a link? Not to be used for strict validation - See [Caveats] **Params** -* **`value`** : _`String`_ | _`Array`_ Test string +* **value** : _`String`_ | _`Array`_ Test string **Returns** _`Boolean`_ From 63654b8e8743d2ba3d8254ff8f8a42a8f80c3add Mon Sep 17 00:00:00 2001 From: Nick Frasser Date: Sun, 3 Feb 2019 00:21:00 +0100 Subject: [PATCH 09/11] minor update in the angular docs Co-Authored-By: AnthonyNahas --- docs/linkify-angular-ts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/linkify-angular-ts.md b/docs/linkify-angular-ts.md index 385cb8a5..50554966 100644 --- a/docs/linkify-angular-ts.md +++ b/docs/linkify-angular-ts.md @@ -37,7 +37,7 @@ npm i -s ngx-linkifyjs --- ##### SystemJS ->**Note**:If you are using `SystemJS`, you should adjust your configuration to point to the UMD bundle. +>**Note**: If you are using `SystemJS`, adjust your configuration to point to the UMD bundle. In your systemjs config file, `map` needs to tell the System loader where to look for `ngx-linkifyjs`: ```js map: { From 7143f172b9d719e062422f33301964990a854132 Mon Sep 17 00:00:00 2001 From: Nick Frasser Date: Sun, 3 Feb 2019 00:21:06 +0100 Subject: [PATCH 10/11] minor update in the angular docs Co-Authored-By: AnthonyNahas --- docs/linkify-angular-ts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/linkify-angular-ts.md b/docs/linkify-angular-ts.md index 50554966..50fd433e 100644 --- a/docs/linkify-angular-ts.md +++ b/docs/linkify-angular-ts.md @@ -3,7 +3,7 @@ layout: doc title: ngx-linkifyjs · Documentation --- -`ngx-linkifyjs` is an angular V7 wrapper for linkifyjs - library for finding links in plain text and converting them +`ngx-linkifyjs` is an Angular V7 wrapper for linkifyjs - a library for finding links in plain text and converting them to HTML <a> tags via linkifyjs and more <3. #### Jump to From e8d0671d98f7756364a5433aed9ef53f3a7ed8f9 Mon Sep 17 00:00:00 2001 From: Anthony Nahas Date: Sun, 3 Feb 2019 00:44:21 +0100 Subject: [PATCH 11/11] docs(project): added a dependency section --- docs/linkify-angular-ts.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/linkify-angular-ts.md b/docs/linkify-angular-ts.md index 50fd433e..f523b4fb 100644 --- a/docs/linkify-angular-ts.md +++ b/docs/linkify-angular-ts.md @@ -25,8 +25,11 @@ to HTML <a> tags via linkifyjs and more <3. View all the directives in action at [https://anthonynahas.github.io/ngx-linkifyjs](https://anthonynahas.github.io/ngx-linkifyjs) -## Installation +## Dependencies + +* [Angular](https://angular.io) (*requires* Angular 2 or higher, developed with 7.x) +## Installation Install above dependencies via *npm*.