matteodepalo / ember-wrap-urls

:link: Automatically turns URLs into Hyperlinks for user-generated-content

@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 extra components:

• wrap-urls/url
• wrap-urls/link

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

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

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

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 @component to customise how they are rendered.

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

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

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