Dropcaps in Discourse - cannot override span tag

UX
1

Hi,

I have a short question.

I added a CSS class to my theme.

.dropcap {
        font-size: 300% !important;
        width: 0.7em !important;
        line-height: 80% !important;
        float: left !important;
        color: #808080 !important;
    }

Usually instead of .dropcap I would have used span. For Discourse that’s not a good idea. The CSS theme editor doesn’t like you to mess with span due to the syntax highlighting.

<span class="dropcap">I</span> can use Dropcaps. Not.

The class isn’t usable…

I have stuff in my CSS like

.topic-body{
    min-width: 65%;
}

Works. But I cannot define new classes? Is there anything I am missing?

2

Any css classes that you add to that html will be stripped by the Discourse markdown parser. If you need to you can whitelist css classes with a plugin.

3

Hmh, I have been search the forum here and most people seem to have issues with doing that. Found very little boilerplate code I could re-use.

Let me see what I can do… if someone has a plugin that does something like this, I’d appreciate a link. I can modify it.

4 
(function() {

  Discourse.Markdown.whiteListTag('span', 'class', 'dropcap');

})();

Try the simple JavaScrpit above. example

3 Likes
5

That helps a lot, thanks.

I just forked your repo and edited the JS:

https://github.com/norandom/discourse-image-tag-whitelist/blob/master/assets/javascripts/image-tag-whitelist.js

Doesn’t work yet.

plugin-third-party-9f5ae545c7453c0bb91cd02e51f991ddd61a060df40c58f468de9f1f46d2f23d.js:1 Uncaught TypeError: Cannot read property 'whiteListTag' of undefined
    at plugin-third-party-9f5ae545c7453c0bb91cd02e51f991ddd61a060df40c58f468de9f1f46d2f23d.js:1
    at plugin-third-party-9f5ae545c7453c0bb91cd02e51f991ddd61a060df40c58f468de9f1f46d2f23d.js:1

Not sure why. I rarely code JS. Tried an import (latest commit), but I highly doubt that I need that tbh…

6

That isn’t how you do it. You now do the following:
https://github.com/cpradio/discourse-plugin-checklist/blob/master/assets/javascripts/lib/discourse-markdown/checklist.js.es6#L102-L108

4 Likes
7

That repo was not mine. But it have no problems. Recently major change done in markdown. I guess that’s causing the issue.

After some research I found currently Markdown whitelisting should be done in other way like below.

import WhiteLister from 'pretty-text/white-lister';

export default {
  name: 'dropcap',

  initialize() {
    const whiteLister = new WhiteLister();
    whiteLister.whiteListFeature("dropcap", [
      'span.dropcap'
    ]);
  }
};

Above code should be placed in ember initializer. For that you should know basic plugin development.

Looks like @cpradio’s method is already working fine. So you can try it first.

2 Likes
8

Hey,

I tried @cpradio 's solution.

Good news: it compiled. Nothing died.

Bad news: it doesn’t do anything.

https://github.com/norandom/discourse-span-tag-whitelist/blob/master/assets/javascripts/span-tag-whitelist.js.es6

Somehow I sense that this isn’t going to be that 5 minute job…

9

You are close, but that isn’t quite right.

First, the file path should be assets/javascripts/lib/discourse-markdown/dropcaps.js.es6

Next it needs to have the contents of

export function setup(helper) {
  helper.registerOptions((opts, siteSettings)=>{
    opts.features['dropcaps'] = true; //!!siteSettings.dropcaps_enabled;
  });

  helper.whiteList([ 'span.dropcaps', 'span.sclass' ]);
}
5 Likes