Dropcaps in Discourse - cannot override span tag

Contribute UX

AI-generated summary

norandom is having trouble overriding the span tag in Discourse to use dropcaps. vinothkannans explains that any CSS classes added to the HTML will be stripped by the Discourse markdown parser and suggests whitelisting the CSS class with a plugin.

vinothkannans provides a JavaScript code snippet to whitelist the span tag with the dropcap class, but norandom is unable to get it working due to an error.

cpradio and vinothkannans provide alternative solutions, with cpradio’s approach requiring a specific file path and contents to whitelist the span.dropcaps class in Discourse. However, norandom is still having trouble getting it to work.

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 إعجابات
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 إعجابات
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)
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 إعجابات