README
@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}}