Support for [email] [url] [img] bbcodes

app/assets/javascripts/pretty-text/engines/markdown-it/bbcode-inline.js.es6

@@ -16,9 +16,9 @@ function tokanizeBBCode(state, silent, ruler) {
   }
 
   let rules = ruler.getRules();
-  let rule;
+  let rule, i;
 
-  for (let i=0; i<rules.length; i++) {
+  for (i=0; i<rules.length; i++) {
     let r = rules[i].rule;
     if (r.tag === tagInfo.tag) {
       rule = r;
@@ -30,6 +30,37 @@ function tokanizeBBCode(state, silent, ruler) {
     return false;
   }
 
+  if (rule.replace) {
+    // special handling for replace
+    // we pass raw contents to callback so we simply need to greedy match to end tag
+    if (tagInfo.closing) {
+      return false;
+    }
+
+    let closeTag = '[/' + tagInfo.tag + ']';
+    let found = false;
+
+    for(i=state.pos+tagInfo.length; i<=state.posMax-closeTag.length; i++) {
+      if (state.src.charCodeAt(pos) === 91 && state.src.slice(i, i + closeTag.length).toLowerCase() === closeTag) {
+        found = true;
+        break;
+      }
+    }
+
+    if (!found) {
+      return false;
+    }
+
+    let content = state.src.slice(state.pos+tagInfo.length, i);
+
+    if (rule.replace(state, tagInfo, content)) {
+      state.pos = i + closeTag.length;
+      return true;
+    } else {
+      return false;
+    }
+  } else {
+
     tagInfo.rule = rule;
 
     let token = state.push('text', '' , 0);
@@ -49,6 +80,7 @@ function tokanizeBBCode(state, silent, ruler) {
     state.pos = pos + tagInfo.length;
     return true;
   }
+}
 
 function processBBCode(state, silent) {
   let i,
@@ -118,6 +150,48 @@ export function setup(helper) {
     md.inline.ruler.push('bbcode-inline', (state,silent) => tokanizeBBCode(state,silent,ruler));
     md.inline.ruler2.before('text_collapse', 'bbcode-inline', processBBCode);
 
+    ruler.push('url', {
+      tag: 'url',
+      replace: function(state, tagInfo, content) {
+        let token;
+
+        token = state.push('link_open', 'a', 1);
+        token.attrs = [['href', content], ['data-bbcode', 'true']];
+
+        token = state.push('text', '', 0);
+        token.content = content;
+
+        token = state.push('link_close', 'a', -1);
+        return true;
+      }
+    });
+
+    ruler.push('email', {
+      tag: 'email',
+      replace: function(state, tagInfo, content) {
+        let token;
+
+        token = state.push('link_open', 'a', 1);
+        token.attrs = [['href', 'mailto:' + content], ['data-bbcode', 'true']];
+
+        token = state.push('text', '', 0);
+        token.content = content;
+
+        token = state.push('link_close', 'a', -1);
+        return true;
+      }
+    });
+
+    ruler.push('image', {
+      tag: 'img',
+      replace: function(state, tagInfo, content) {
+        let token = state.push('image', 'img', 0);
+        token.attrs = [['src', content],['alt','']];
+        token.children = [];
+        return true;
+      }
+    });
+
     ruler.push('bold', {
       tag: 'b',
       wrap: 'span.bbcode-b',

spec/components/pretty_text_spec.rb

@@ -759,6 +759,31 @@ HTML
 
       expect(cook("[quote=\"EvilTrout, post:2, topic:#{topic.id}\"]\nddd\n[/quote]", topic_id: 1)).to eq(n(expected))
     end
+
+    it "supports img bbcode" do
+      cooked = PrettyText.cook "[img]http://www.image/test.png[/img]"
+      html = "<p><img src=\"http://www.image/test.png\" alt></p>"
+      expect(cooked).to eq(html)
+    end
+
+    it "provides safety for img bbcode" do
+      cooked = PrettyText.cook "[img]http://aaa.com<script>alert(1);</script>[/img]"
+      html = '<p><img src="http://aaa.com&lt;script&gt;alert(1);&lt;/script&gt;" alt></p>'
+      expect(cooked).to eq(html)
+    end
+
+    it "supports email bbcode" do
+      cooked = PrettyText.cook "[email]sam@sam.com[/email]"
+      html = '<p><a href="mailto:sam@sam.com" data-bbcode="true">sam@sam.com</a></p>'
+      expect(cooked).to eq(html)
+    end
+
+    it "supports url bbcode" do
+      cooked = PrettyText.cook "[url]http://sam.com[/url]"
+      html = '<p><a href="http://sam.com" data-bbcode="true" rel="nofollow noopener">http://sam.com</a></p>'
+      expect(cooked).to eq(html)
+    end
+
   end
 
 end