@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

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>

Built in components

This addon comes with two built in components:

wrap-urls/url
wrap-urls/link

By default, URLs will be rendered using wrap-urls/url

You can set @Url to change which component is used to render each URL:

<WrapUrls
  @Url={{component "wrap-urls/link"}}
  @text="Visit http://example.com"
/>

Will result in:

Visit <a class="wrapped-url-link" href="http://example.com">http://example.com</a>

Customising

Specify your own @pattern to use for finding hyperlinks, and your own @Url to customise how they are rendered.

<WrapUrls
  @Url={{component "mailto"}}
  @text={{this.text}}
  @pattern={{this.mailtoPattern}}
/>

In your component's template you will have access to:

{{@url.string}}
{{@url.start}}
{{@url.end}}

npm