johno / ember-linkify

Linkify urls in an Ember app with a fancy helper

ember-linkify

Linkify URLs in an Ember app with a helper that uses a tested url-regex and Handlebars Utils.escapeExpression to ensure links are safe.

Installation

ember install ember-linkify

Usage

{{linkify post.description}}

{{linkify commentText}}

Use the helper with a raw string

{{linkify 'Here is a link: https://google.com and some attempted XSS <script>alert("xss!");</script>'}}
{{! => 'Here is a link: <a href="https://google.com">https://google.com</a> and some attempted XSS &lt;script&gt;alert(&quot;xss!&quot;);&lt;/script&gt;'}}

Or with a variable bound to an input

{{textarea value=text placeholder='Enter some text with a url'}}
{{linkify text}}

You can specify options to the helper such as 'urlLength' which shortens the URL by 'urlLength' and add 3 dots to the end

{{linkify text urlLength=30}}

The 'defaultScheme' option specifies a scheme to use for URLs that don’t already have one.

For instance, the following will ensure that the https scheme is used for the created link:

{{linkify 'Link without a scheme: www.foo.com' defaultScheme='https'}}

Also use options to specify attributes you want to add to the generated anchor tags. Currently, "target", "rel" and "class" are the only recognized attributes.

{{linkify text target='_blank' rel='nofollow' class='external-link'}}

Development

Installation

• git clone this repository
• cd my-addon
• npm install

Running

• ember server
• Visit your app at http://localhost:4200.

Running Tests

• ember test
• ember test --server
• ember try:each – Runs the test suite against multiple Ember versions

Building

• ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.

License

MIT

Contributing

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request

---

Crafted with <3 by John Otander(@4lpine).

ember-linkify's Issues

Add strict option

Add `tmp` dir to the .npmignore.

ember-cli/ember-cli#4199

Update babel

@johno
Get this from NPM now.

DEPRECATION: ember-cli-babel 5.x has been deprecated+. Please upgrade to at least ember-cli-babel 6.6. Version 5.2.8 located: tv-web -> ember-linkify -> ember-cli-babel

An overall update would be good. Is this addon still alive?

Readme doesn't state target possibility

It is possibe to specify the target as second parameter, but that is not stated in the readme. I found out that it was possible by looking through the code. It would be nice if this could be added.

ember-linkify does not work with the latest Ember (3.7)

Trying to upgrade from previous Ember version generates the following error upon loading the app:

Error: Could not find module `ember` imported from `ember-linkify/helpers/linkify`

URLs with fragments without a leading '/' not supported

It seems like http://some.website.com#fragment URLs are not properly parsed, although they are allowed according to the URI specifications.

Consider supporting multiple links separated by punctuation

Given the strings:

• http://www.a.com http://www.b.com
• http://www.a.com, http://www.b.com, and http://www.c.com.

Expected output:

• <a href="http://www.a.com" target="_self">http://www.a.com</a> <a href="http://www.b.com" target="_self">http://www.b.com</a>
• <a href="http://www.a.com" target="_self">http://www.a.com</a>, <a href="http://www.b.com" target="_self">http://www.b.com</a>, and <a href="http://www.c.com" target="_self">http://www.c.com</a>.

Observed output:

• <a href="http://www.a.com" target="_self">http://www.a.com</a> http://www.b.com
• http://www.a.com, http://www.b.com, and http://www.c.com.

Target attribute

Hello.
The default behavior for anchor links is opening within the same page as if it had the attribute target="_self".
I think you should add target as recognized attributes (or supported options) like you did with rel and class.
If you see any problem feel free to correct me. If agreed, I'm happy to work on a PR for this =)
Thanks!

Don't include punctuation in link

When a URL appears at the end of a punctuated sentence the punctuation mark is included in the link, which is almost always not what one wants.

For instance, the text Check out this link: http://foo.org. becomes Check out this link: <a href="http://foo.org.">http://foo.org.</a> instead of the expected Check out this link: <a href="http://foo.org">http://foo.org</a>..

Localhost links aren't recognised

One more to break our brains over: http://localhost:80 isn't recognised as a valid URL. Not so much fun when testing my previous issue ;p

Does not respect html handed to text attribute.

I'd love to be able to include an icon inside the link that ember-linkify creates for me. The problem is that many popular libraries use an <i></i> tag to denote icons. If this add-on were a component it could allow the user to specify the <a> tag's body.

I guess another suggestion would be to allow html in the text argument of the helper.

Support "rel" attribute

A security vulnerability exists in the inherent mechanics of opening links with target="_blank". In short, the opened window can cause its opener to navigate to a malicious site via the new window's window.opener.location object. Sites with user-generated content may be especially susceptible.

The proposed fix is to specify a special rel attribute. Browser support is currently poor, but it might be good to at least remove ember-linkify as a barrier to specifying this attribute in anchor tag mark-up. Maybe add rel as a supported option?

Further description and bug tracking issues at https://mathiasbynens.github.io/rel-noopener/.

Use new Helper API

A new Ember helper API was intoduced in 1.13: http://emberjs.com/blog/2015/06/12/ember-1-13-0-released.html#toc_new-ember-js-helper-api
This would also make it easier to unit-test components that use the linkify helper.

ember-linkify generates deprecation warning with latest ember: ember-cli-babel 5.2.4->6.6

Trying to run with latest ember gives:

DEPRECATION: ember-cli-babel 5.x has been deprecated. Please upgrade to at least ember-cli-babel 6.6. Version 5.2.4 located: ~/webapp/node_modules/ember-linkify/node_modules/ember-cli-babel

Add a linkify component

Use default ember transitions for internal links

It would be great not to have a normal page load in "_self" when clicking on a link inside Ember. Currently, using linkify and clicking on a link that directs to a page in the same ember-app, reloads Ember on that page, but that loading time wouldn't be there if a normal transition was used.

Our current solution is always use _blank and override the click event (not my code 😒)

click(ev) {
    // Source: https://github.com/whoward/ember-twitter-clone/commit/93af68d9f504b8b8972487e6c09851d3523a3678
    const href = this.$(ev.target).attr('href');
    if (href) {
      const parser = document.createElement('a');
      parser.href = href;
      if (!(parser.hostname === window.location.hostname || parser.hostname === `www.${window.location.hostname}`)) {
        return;
      }

      ev.preventDefault();
      const router = getOwner(this).lookup('router:main');
      router.transitionTo(parser.pathname);
    }
  }

Trailing newlines are stripped

A newline immediately following a link gets stripped.

Steps to reproduce

Run a link with a trailing newlines through ember-linkify.

Observed behavior

http://example.com
next line

becomes

<a href="http://example.com">http://example.com</a> next line

Expected behavior

http://example.com
next line

becomes

<a href="http://example.com">http://example.com</a>
next line

Support ip addresses in urls

Currently there doesn't seem to be any support for urls that start with ip addresses.
I have added a test to cover the scenario in #16
Is this something you would consider adding?