Plots2: Adding a shortcode for button

[grvsachdeva]

Simple shortcode for buttons. Something like

[button:Post a question:https://publiclab.org/questions/new]

Currently, users add buttons using HTML

Via: https://github.com/publiclab/plots2/issues/4486#issuecomment-470780719

[digitaldina]

@gauravano I'd love to pick this up and I'm wondering where I'd start? Thanks!

[jywarren]

Oh hi @dinaelhanan - long time no see, and so great to see you again!

We "recognize" short codes in this file (i've highlighted a simpler one) and then use a template to render an HTML segment:

https://github.com/publiclab/plots2/blob/98d2a28028ab3b805aceb4bdd194aaed7f330b57/app/models/concerns/node_shared.rb#L284-L304

(although for this simple case of a button, we can probably be simpler and not use a template, but instead just assemble the HTML button string inline and return that. Like return "<a class='btn btn-primary' href='" + btnHref + "'>" + btnText + "</a>" at the end)

Then we use them to actually filter node body content here: https://github.com/publiclab/plots2/blob/master/app/helpers/application_helper.rb#L78

Does that make sense? Thank you!!!

[jywarren]

And a good way to test out the shortcode recognition code is to use this Regular Expression testing site: https://rubular.com/

[digitaldina]

@jywarren sounds good. I'll be working on this tomorrow and I'll let you know if I have any issues :)

[digitaldina]

Hey @jywarren I'm not understanding lines 285-290 (below) As in, how do they work? Especially the body.gsub. I'm guessing that's how we would substitute the shortcode for a button with the actual HTML. But why would we then return the string? What does body.gsub do? I also don't get what Rexep does. Also, why does it "do |_tagname|"? I appreciate the help!

[jywarren]

So, it's a bit convoluted. Could be easier to read for sure. But basically on line 286, we use a pattern matcher (using Regular Expressions - magical, in my opinion!) to find instances of the short codes we're looking for. This can recognize pretty complex patterns even though the contents change -- the overall pattern is matched.

Then we pick out sub-strings of that pattern using these Regexp.last_match() lines, which are the parts that specify what's to be inserted into the HTML template. We then treat those as parameters, basically, and assemble the outgoing HTML.

This is a really tightly written bit of code, but it's very powerful. And it's well tested -- check out the tests to see it in action!

https://github.com/publiclab/plots2/blob/fa39d7a7e294f4352a4fe9daaaafaed2ff3e782f/test/unit/node_shared_test.rb#L14-L22

You can test this on a string to see it pattern-match here: https://rubular.com/r/pUkHBIjePYl9H2

Here's one with the above mentioned "Button" syntax --

https://rubular.com/r/a5d9xkBmS3LsMS

I hope this helps!! Thanks @dinaelhanan and again, great seeing you!

[digitaldina]

@jywarren good seeing you too! I think I get it, we grab parts of the note that match the button or maps pattern, then use parts of that pattern as btnHref and btnText. This is really going to help me work through it today. I appreciate the explanation!

[jywarren]

That's exactly right. Ok, good luck and ask if you get stuck!!!

On Mon, Mar 11, 2019, 7:44 PM d1g1t4ld1n4 [e-mail] wrote:

@jywarren https://github.com/jywarren good seeing you too! I think I
get it, we grab parts of the note that match the button or maps pattern,
then use parts of that pattern as btnHref and btnText. This is really going
to help me work through it today. I appreciate the explanation!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/4965#issuecomment-471785304,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABfJ2Eu12_Q53z_zrSS2IVtWJbnJFoWks5vVuotgaJpZM4bmMy-
.