External links

README.md

@@ -22,9 +22,19 @@ Just type `npm run build` and the file `bin/mp-style-parser.js` will be generate
 
 ## Usage
 
-In your javascript application just do `MPStyle.Parser.toHTML('$o foo $i bar');`
+In you web applications, include the script via: `<script src="https://maniaplanet.github.io/maniaplanet-style-js-parser/bin/mp-style-parser.js"></script>`
 
-In web projects : `<script src="https://maniaplanet.github.io/maniaplanet-style-js-parser/bin/mp-style-parser.js"></script>`
+Then you can use it by doing: `MPStyle.Parser.toHTML('$o foo $i bar');`
+
+You can add options by passing an object to the `toHTML` function. Here's a complete example of all possible options and their default values:
+
+```js
+var html = MPStyle.Parser.toHTML(text, {
+  disableLinks: false,
+  externalLinks: false,
+  lightBackground: false,
+});
+```
 
 ## Tests
 

docs/bin/mp-style-parser.js

@@ -79,19 +79,26 @@ exports.Color = Color;
 var LinkToken;
 
 LinkToken = (function() {
-  function LinkToken(manialink, link) {
+  function LinkToken(manialink) {
     this.manialink = manialink != null ? manialink : false;
-    this.link = link != null ? link : "";
+    this.link = "";
+    this.external = false;
   }
 
   LinkToken.prototype.toHTML = function() {
+    var ret;
     if (this.manialink && !/^maniaplanet:/i.test(this.link)) {
       this.link = "maniaplanet://#manialink=" + this.link;
     }
     if (!this.manialink && !/^http:/i.test(this.link)) {
       this.link = "http://" + this.link;
     }
-    return '<a href="' + this.link + '">';
+    ret = '<a href="' + this.link + '"';
+    if (this.external && !this.manialink) {
+      ret += ' target="_blank" rel="noopener noreferrer"';
+    }
+    ret += ">";
+    return ret;
   };
 
   return LinkToken;
@@ -143,6 +150,7 @@ Parser = (function() {
     }
     this.options = {
       disableLinks: options.disableLinks,
+      externalLinks: options.externalLinks,
       lightBackground: options.lightBackground
     };
     return ((function() {
@@ -226,6 +234,7 @@ Parser = (function() {
             } else {
               endText(true);
               nextLinkToken = new LinkToken(tok === "h");
+              nextLinkToken.external = this.options.externalLinks;
               if (!this.options.disableLinks) {
                 tokens.push(nextLinkToken);
               }

docs/index.html

@@ -44,14 +44,16 @@ <h1>ManiaPlanet Style parser</h1>
   <div style="width: 100%; border-style:solid; padding:2px; border-width:1px;" id="result"></div>
 
   Additional options:<br />
-  <label><input type="checkbox" id="disableLinks"> Disable links</label>
-  <label><input type="checkbox" id="lightBackground"> Optimize for light backgrounds</label>
+  <label><input type="checkbox" id="disableLinks"> Disable links</label><br>
+  <label><input type="checkbox" id="externalLinks"> Links open in external window</label><br>
+  <label><input type="checkbox" id="lightBackground"> Optimize for light backgrounds</label><br>
 </div>
 
 <script type="text/javascript">
 function makeOptions() {
 	return {
 		disableLinks: $('#disableLinks').prop('checked'),
+    externalLinks: $('#externalLinks').prop('checked'),
 		lightBackground: $('#lightBackground').prop('checked'),
 	};
 }
@@ -62,7 +64,7 @@ <h1>ManiaPlanet Style parser</h1>
 }
 $(function() {
 	transform();
-	$('#disableLinks,#lightBackground').change(transform);
+	$('#disableLinks,#externalLinks,#lightBackground').change(transform);
 	$('#input').change(transform);
 	$('#input').keyup(transform);
 });
@@ -77,8 +79,16 @@ <h3>Installation</h3>
 
 <h2>Usage</h2>
 
-<p>In you web applications, include the script via : <code>&lt;script src="http://maniaplanet.github.io/maniaplanet-style-js-parser/bin/mp-style-parser.js"&gt;&lt;/script&gt;</code></p>
-<p>Then you can use it by doing : <code>MPStyle.Parser.toHTML('$o foo $i bar');</code></p>
+<p>In you web applications, include the script via: <code>&lt;script src="http://maniaplanet.github.io/maniaplanet-style-js-parser/bin/mp-style-parser.js"&gt;&lt;/script&gt;</code></p>
+<p>Then you can use it by doing: <code>MPStyle.Parser.toHTML('$o foo $i bar');</code></p>
+<p>You can add options by passing an object to the <code>toHTML</code> function. Here's a complete example of all possible options and their default values:</p>
+<pre>
+var html = MPStyle.Parser.toHTML(text, {
+  disableLinks: false,
+  externalLinks: false,
+  lightBackground: false,
+});
+</pre>
       </section>
       <footer>
         <p>This project is maintained by <a href="https://github.com/maniaplanet">maniaplanet</a></p>

src/LinkToken.coffee

@@ -1,12 +1,19 @@
 class LinkToken
 
-  constructor: (@manialink = false, @link = "") ->
+  constructor: (@manialink = false) ->
+    @link = ""
+    @external = false
 
   toHTML: ->
     if @manialink and not /^maniaplanet:/i.test(@link)
       @link = "maniaplanet://#manialink=" + @link
     if not @manialink and not /^http:/i.test(@link)
       @link = "http://" + @link
-    return '<a href="' + @link + '">'
-
+
+    ret = '<a href="' + @link + '"'
+    if @external and not @manialink
+      ret += ' target="_blank" rel="noopener noreferrer"'
+    ret += ">"
+    return ret
+
 exports.LinkToken = LinkToken

src/Parser.coffee

@@ -11,6 +11,7 @@ class Parser
   @toHTML: (text, options = {}) ->
     @options =
       disableLinks: options.disableLinks
+      externalLinks: options.externalLinks
       lightBackground: options.lightBackground
     return (tokens.toHTML() for tokens in @parse(text)).join('')
 
@@ -70,6 +71,7 @@ class Parser
             else
               endText true
               nextLinkToken = new LinkToken(tok is "h")
+              nextLinkToken.external = @options.externalLinks
               if [email protected]
                 tokens.push nextLinkToken
               isQuickLink = true

test/parserTest.coffee

@@ -14,14 +14,18 @@ describe 'Parser', ->
     expect(Parser.toHTML('$l[http://maniaplanet.com]trackmania.com$l')).to.equal('<a href="http://maniaplanet.com">trackmania.com</a>')
   it 'should parse $l with no text', ->
     expect(Parser.toHTML('$lhttp://maniaplanet.com$l')).to.equal('<a href="http://maniaplanet.com">http://maniaplanet.com</a>')
-  it 'should automatically adds a link end tag', ->
+  it 'should automatically add a link end tag', ->
     expect(Parser.toHTML('$lhttp://maniaplanet.com')).to.equal('<a href="http://maniaplanet.com">http://maniaplanet.com</a>')
+  it 'should make a link to open in external window with externalLinks', ->
+    expect(Parser.toHTML('$l[http://maniaplanet.com]trackmania.com$l', externalLinks: true)).to.equal('<a href="http://maniaplanet.com" target="_blank" rel="noopener noreferrer">trackmania.com</a>')
   it 'should handle links with only code as text', ->
     expect(Parser.toHTML('$l[www.clan-nuitblanche.org]$fff$l')).to.equal('')
   it 'should add http protocol to external links', ->
     expect(Parser.toHTML('$l[maniaplanet.com]maniaplanet$l')).to.equal('<a href="http://maniaplanet.com">maniaplanet</a>')
   it 'should add maniaplanet protocol to internal links', ->
     expect(Parser.toHTML('$h[maniaflash]ManiaFlash$h')).to.equal('<a href="maniaplanet://#manialink=maniaflash">ManiaFlash</a>')
+  it 'should not open manialink in external window with externalLinks', ->
+    expect(Parser.toHTML('$h[maniaflash]ManiaFlash$h', externalLinks: true)).to.equal('<a href="maniaplanet://#manialink=maniaflash">ManiaFlash</a>')
   it 'should handle color codes', ->
     expect(Parser.toHTML('$f00Red')).to.equal('<span style="color: #ff0000;">Red</span>')
   it 'should handle incomplete color codes', ->