[solved] Render BBCode with blaze

help
1

I would like to print out BBCode for text on a profile page, which is written by users. I’m using bbob by JiLiZART.

The written text is saved inside the users-document but I have trouble figuring out how I can render the text before it’s actually displayed on the page.

<p id="chardescBB" style="white-space: pre-line"> {{char.chardesc}} </p>

This is where the written text would be displayed.

Now on this template I use

  Template.c.onRendered(function () {
     Meteor.setTimeout(function(){ 
      const desc = document.getElementById("chardescBB");
      code = desc.innerHTML;
      const html = bbob(presetHTML5()).process(code, { render }).html;
      document.getElementById("chardescBB").innerHTML = html;
    }, 500);
  });

to render this text. But this solution is terrible. If the page gets rendered it first shows [b]text[/b] and after 500ms to text due to the Timeout I have to use because it won’t find the value of the displayed right away.

Question would be, if someone could tell me the proper way to do it with blaze? Is the whole approach wrong?

2

You can use a helper to do this:

Template.c.helpers({
  processBBCode(text) {
    return bbob(presetHTML5()).process(text, { render }).html
  }
});

And use triple braces to allow raw html output:

<p id="chardescBB" style="white-space: pre-line"> {{{processBBCode char.chardesc}}} </p>

EDIT: Forgot to pass the text into the parser in the example…

1 Like
3

Thanks for the reply.

If use it it’s giving me

Exception in template helper: ReferenceError: code is not defined
    at Object.processBBCode (http://localhost:3000/app/app.js?hash=eb9801696e7ab5e8c7abfe0c9d1ee0627df17923:1237:40)
    at http://localhost:3000/packages/peerlibrary_blaze-components.js?hash=b001b67eda2e778d47c3fa8612ffe510232e8bed:1270:21
    at http://localhost:3000/packages/blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:1715:16
    at http://localhost:3000/packages/peerlibrary_blaze-components.js?hash=b001b67eda2e778d47c3fa8612ffe510232e8bed:1289:66
    at Function.Template._withTemplateInstanceFunc (http://localhost:3000/packages/blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:3769:14)
    at http://localhost:3000/packages/peerlibrary_blaze-components.js?hash=b001b67eda2e778d47c3fa8612ffe510232e8bed:1288:27
    at Spacebars.call (http://localhost:3000/packages/spacebars.js?hash=6f2be25813c793c0b363a6a91ebb029723f294ec:172:18)
    at Spacebars.mustacheImpl (http://localhost:3000/packages/spacebars.js?hash=6f2be25813c793c0b363a6a91ebb029723f294ec:106:25)
    at Object.Spacebars.mustache (http://localhost:3000/packages/spacebars.js?hash=6f2be25813c793c0b363a6a91ebb029723f294ec:110:39)
    at Blaze.View._render (http://localhost:3000/app/app.js?hash=eb9801696e7ab5e8c7abfe0c9d1ee0627df17923:585:42)

Since the variable was used in my own approach. However, if I remove it I’ll get

Exception in template helper: RangeError: Invalid array length
    at createLexer (http://localhost:3000/packages/modules.js?hash=d4228fef4dda485f45a01680ca9e75cd3c286374:1682:17)
    at parse (http://localhost:3000/packages/modules.js?hash=d4228fef4dda485f45a01680ca9e75cd3c286374:2079:75)
    at Object.process (http://localhost:3000/packages/modules.js?hash=d4228fef4dda485f45a01680ca9e75cd3c286374:2183:53)
    at Object.processBBCode (http://localhost:3000/app/app.js?hash=d3fd4aed8f05f54084e40cd49f6442a431737f7e:1237:32)
    at http://localhost:3000/packages/peerlibrary_blaze-components.js?hash=b001b67eda2e778d47c3fa8612ffe510232e8bed:1270:21
    at http://localhost:3000/packages/blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:1715:16
    at http://localhost:3000/packages/peerlibrary_blaze-components.js?hash=b001b67eda2e778d47c3fa8612ffe510232e8bed:1289:66
    at Function.Template._withTemplateInstanceFunc (http://localhost:3000/packages/blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:3769:14)
    at http://localhost:3000/packages/peerlibrary_blaze-components.js?hash=b001b67eda2e778d47c3fa8612ffe510232e8bed:1288:27
    at Spacebars.call (http://localhost:3000/packages/spacebars.js?hash=6f2be25813c793c0b363a6a91ebb029723f294ec:172:18)

Also, what would be the use of the “text”-parameter?

Edit: Ah, sorry, just figured it out. I had to put text in instead of code.

1 Like
4

Yep, copy paste error by me. Glad you figured it out