@zestia/ember-wrap-urls

This Ember addon takes some text, which may or may not contain URLs and renders the text and each URL as an Ember component.

Installation

ember install @zestia/ember-wrap-urls

Add the following to ~/.npmrc to pull @zestia scoped packages from Github instead of NPM.

@zestia:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=<YOUR_GH_TOKEN>

Demo

https://zestia.github.io/ember-wrap-urls

Example

Given the following:

<WrapUrls @text='Check out my link: http://example.com' />

Will render:

Check out my link <span class='wrapped-url'>http://example.com</span>

WrapUrls

Arguments

@text

Required. The text within which to find URLs.

@Url

Optional. The component used to display each URL discovered within @text. Defaults to wrap-urls/url. You can also set it to wrap-urls/link, or a component of your choice.

@pattern

Optional. The regular expression used to find URLs in the @text. You may wish to set this to match mailto links for example.

API

When a URL is found, and a component is rendered in its place, that component will have this API available to it in the template as an argument @url.

string

The URL that this component should render.

start

The position in the @text where the URL starts.

end

The position in the @text where the URL ends.