Need help with Dialect emitter

(Mittineague) #1

I’ve been working on a plugin that will replace custom bbCode-like tags with smilie images.

I’ve searched Google (though likely not with the term(s) I need to use)
I’ve dug around the Core files
I’ve analyzed existing plugins

I’ve tried a dozen variations of the syntax, but have as yet been unable to get an image tag with a src attribute.

I’ve noticed that some code has the attr names in quotes, some not.
And I don’t understand why emoji would give an image an href instead of a src.

Anyway, this is what I have the emitter returning now.

return ['img', {"class": "classic-sitepoint-smilies", "width": "20px", "height": "20px", "alt": "test smilie", "title": "not yet", "src": "../public/images/afro.gif"}];

And I get

<p>here -&gt; <img class="classic-sitepoint-smilies" alt="test smilie" title="not yet" height="20px" width="20px"> &lt;- here</p>

I don’t mind the attribute order being different, but I really need to figure out how to get the src attribute into the img tag.

Basic smiley (:smile:) should not have closed eyes
(cpradio) #2

It may need to be whitelisted?

(Mittineague) #3

I was hoping this would have taken care of that

Post::white_listed_image_classes << "classic-sitepoint-smilies"

Hopefully I won’t need to whitelist every src value. Possible, but with ~195 of them a bit inneficient it would seem.

I’ll try

Discourse.Markdown.whiteListTag('img', 'classic-sitepoint-smilies')

and keep my fingers crossed

Wrong place?

/vagrant/plugins/classic-sitepoint-smilies/plugin.rb:14:in `block in activate!':
undefined method `Markdown' for Discourse:Module (NoMethodError)

(Kane York) #4
Discourse.Markdown.whiteListTag("img", "src", /^\/public\/images\/[a-zA-Z0-9]+\.(gif|png)$/)
Discourse.Markdown.whiteListTag("img", "class", /^classic-sitepoint-smilies$/)

(Mittineague) #5

Wow, am I a stubborn persistant SOB :wink:

After trying countless variations I’ve seen a lot of source code - not a bad thing - and finally seem to have got to a point where I can move on.

My years of working with HTML have made me firmly set in thinking img tags need a src attribute.

But no matter how I tried it was always getting stripped out. And I need src !

Amazingly this

    return ['img', {"class": "classic-sitepoint-smilies",
					"alt": "alt text here",
					"title": "title text here",
					"href": "/file.gif"
Discourse.Markdown.whiteListTag("img", "href", /[-_a-zA-Z0-9]+\.(gif|png)$/igm);
Discourse.Markdown.whiteListTag("img", "class", /^classic-sitepoint-smilies$/igm);

produces this

<p>here -&gt; <img src="/file.gif" class="classic-sitepoint-smilies" alt="alt text here" title="title text here"> &lt;- here</p>

Hard coded for now so I still need to work in the dynamic stuff and get my production to show more than a stripped down no-js page, but I feel great that I can finally move on. :joy:

(Sam Saffron) #6

That sure is weird cc @eviltrout

(Kane York) #7

What’s with the igm? You inherently don’t want global matches, and are CSS classes actually case-insensitive? Do you really want a multi-line CSS class name?

I ask because /g gets stripped out by the auto-anchor in whiteListTag. The output of your markdown transformations are not sacred, someone can always copy the HTML for the same result, and user-specified CSS classes is a great way to mess up the page.fa-spin

(Mittineague) #8

The “igm” was a “shot in the dark” (and there were plenty of those, I was getting frustrated after a few dozen tries) that I hadn’t refactored out when I posted the previous example.

I was under the impression that the modifiers were
i - case insensitive (yes, it’s not needed here)
g - “greedy” not “global” i.e.
so [tag];)[/tag] and [tag]:([/tag] won’t capture ;)[/tag] and [tag]:(
m - multi-line (also likely not needed)

Anyway, it seems no matter how or what I tried using Discourse.Dialect.inlineBetween “src” was always stripped out. Using Discourse.Dialect.inlineRegexp with “href” instead of “src” is the first and only way I found so far of getting the attr and path into the tag.

re whitelisting, which are you suggesting I change / remove? I remember seeing the fa-spin discussion but don’t remember the details.

It might be my using [c]smile[/c] was getting intercepted by the bbCode parser?

(Mittineague) #9

Scratch what I said about Discourse.Dialect.inlineRegexp working. Upon further development that too stopped working even after reverting back. So that must have been a fluke.

I did however discover that adding `“data-bbcode”: true’ allows for the href value to become the img src value.

Now if I can tweak my Windows into allowing symlinks and I can get my localhost into a decent production mode so I can precompile assets I’ll be all set.