Composer Buttons Plugin



  • I wrote a plugin to add the Del/Ins and Abbr buttons to the composer. You can see the code here:

    I have no idea how to setup or use npm, so you have to manually install it for now. Just create a folder inside node_modules called nodebb-plugin-tdwtf-buttons and copy all the files there.

    I want to add the spoiler button, but that will take much more effort. I already know how to hook up code that will parse the posts and replace text. What I don't know is the HTML/CSS/JS that actually does the spoilering. Let me know if you would like to help.


  • mod

    @NedFodder said in Composer Buttons Plugin:

    I have no idea how to setup or use npm

    Just do npm install NedFodder/nodebb-plugin-tdwtf-buttons and it'll pull it down from github and install it. NPM is smart enough to figure that out.


  • Winner of the 2016 Presidential Election

    @NedFodder said:

    What I don't know is the HTML/CSS/JS that actually does the spoilering

    5 seconds on googling later:

    https://css-tricks.com/snippets/css/blurry-text/

    .blur {
       color: transparent;
       text-shadow: 0 0 5px rgba(0,0,0,0.5);
    }
    

    and
    http://www.w3schools.com/cssref/css3_pr_filter.asp

    .blur{
        -webkit-filter: blur(80%); /* Chrome, Safari, Opera */
        filter: blur(80%);
    }
    

    put that inside a

    <p class="blur" onclick="toggleBlur(this);">!INSERT TEXT AND IMAGES HERE!</p>
    

    and write a small toggle-script in JS?

    function toggleBlur(where){
    $(where).toggleClass("blur");
    }
    

    Filed UNder: Not tested or anything... might also be terribly hacky!



  • @Kuro said in Composer Buttons Plugin:

    put that inside a

    <p class="blur" onclick="toggleBlur(this);">!INSERT TEXT AND IMAGES HERE!</p>
    

    Hey @ben_lubar, will this pass through the markdown HTML sanitizer?


  • sockdevs

    @NedFodder This isn't the same as the old blurred spoiler, but it should do the job enough of the time regardless:

    And that will pass the sanitiser


  • Winner of the 2016 Presidential Election

    @NedFodder I thought the replacement would be done on server side. So the user would see <spoiler>text</spoiler> and whatever processes posts on the server would do the replace (and re-replace for editing).

    Filed Under: So I might have misunderstood



  • @Kuro said in Composer Buttons Plugin:

    I thought the replacement would be done on server side

    Yes, but in my testing the replacement happens before the markdown plugin sanitizes the HTML. I don't know how ben_lubar set up this instance, but on mine markdown sanitized all the HTML. I had to disable it just to get ins, del, and abbr tags to work.



  • @RaceProUK Doesn't work on FF on my test instance. It should work on FF here on WTDWTF, I can see it here:

    https://what.thedailywtf.com/topic/19483/css-is-hard/5

    Hey @PJH what did you do to make it work here?

    In any event, I'll accept this and use it as a starting point for the "real" spoilering. Thanks!


  • sockdevs

    @NedFodder said in Composer Buttons Plugin:

    Doesn't work on FF on my test instance

    Oh yeah, forgot FF is a :snowflake: when it comes to the <details> tag… oh well, it's there if you want it



  • @NedFodder said in Composer Buttons Plugin:

    I don't know how ben_lubar set up this instance



  • @Yamikuronue said in Composer Buttons Plugin:

    Just do npm install NedFodder/nodebb-plugin-tdwtf-buttons and it'll pull it down from github and install it.

    Alternatively, if you have it on your machine and you're developing it, go into the directory where you're working on it:

    $ sudo npm link
    $ cd path/to/nodebb
    $ npm link nodebb-plugin-foo
    


  • @ben_lubar said in Composer Buttons Plugin:

    @NedFodder said in Composer Buttons Plugin:

    I don't know how ben_lubar set up this instance

    You have to allow html in the markdown parser. Then you should also install Ben's htmlcleaner, unless you want to allow signatureguy.



  • I added @Kuro's hacks to @RaceProUK 's button. I tested it against @ben_lubar 's sanitizer following @boomzilla 's suggestion. Works on my test instance, but I'm not going to guarantee it works everywhere! Thanks, everyone.



  • I realized yesterday that I had only done minimal testing of the spoiler code. I had not tested spoilered links or images, and I had only tested Firefox and Chrome. I went back to do more testing, including testing on IE11 (I have no way to test Edge or older versions of IE from here). I found these major problems:

    1. On IE11, spoilered text was invisible.
    2. Images were not spoilered.
    3. Links in spoilered text were not spoilered.

    I just committed fixes for these issues. More issues remain:

    1. On IE11, images and links are still not spoilered.
    2. Blank lines in spoilers don't work (the first line of text will be spoilered, the rest will be in the clear).
    3. Spoilered images are not the same size as regular images.
    4. On FF, un-spoilering an image leaves a "haze" on the image.

    Lemme explain that last one. When you put an image in a post, NodeBB wraps the image in an <a> which is supposed to open the image in a new tab when you click on it. To prevent that, I put pointer-events: none in the CSS, but the <a> is still there. When I click on the image to un-spoiler it, FF thinks I clicked on a link and wants to highlight it, which leaves that haze. Clicking anywhere else will "unselect" the link, and show the image without the haze.

    Spoilered image:

    0_1459967720229_Capture.PNG

    Un-spoilered image:

    0_1459967762893_Capture.PNG

    Un-spoilered image after clicking somewhere else:

    0_1459967803961_Capture.PNG

    As for the issues with IE11: I'm pretty sure I know how to spoiler links. Blurring images is a whole different problem. Discourse did it by replacing all the <img> tags in spoiler blocks with <svg> tags, then applied some feGaussianBlur magic. This works great across all browsers when I tested a small html file. But when I moved that code to my NodeBB plugin, it only worked on Chrome. On FF the image would sometimes disappear while scrolling, and on IE11 the image just never appears.

    So, some questions:

    • Should I keep worrying about IE11 or older?
    • Can someone help me test Edge?
    • Is there a better way of disabling the <a> on images?
    • I'd like to eventually see this plugin on the official forum. What do I have to do to convince everyone (or at least @ben_lubar) to use it?


  • @NedFodder said in Composer Buttons Plugin:

    I'd like to eventually see this plugin on the official forum.

    :thumbsup_tone1: Image spoilering has always been...problematic. It might honestly be better to put it into a summary / details set of tags to properly hide it instead of trying to blur it.

    Or maybe take it out for now and put it in a branch so at least we can get the abbr / del+ins stuff, which I really miss.



  • @NedFodder said in Composer Buttons Plugin:

    This works great across all browsers when I tested a small html file. But when I moved that code to my NodeBB plugin, it only worked on Chrome. On FF the image would sometimes disappear while scrolling, and on IE11 the image just never appears.

    Might be related to all the anti-jellypotato code we got @julianlam to add?



  • @NedFodder said in Composer Buttons Plugin:

    Blank lines in spoilers don't work

    Here's the issue. I have two goals:

    1. I want to be able to have spoilers in the middle of a sentence.
    2. I want to be able to have multi-line spoilers.

    In order to get goal #1, I can wrap the spoiled text in a <span>. If there's a newline in the spoiled text, it gets replaced with <p>s or <br>s, so it won't work with goal #2.

    In order to get goal #2, I can wrap the spoiled text in a div. This forces the start of the spoiler text on a new line, so it breaks goal #1.

    The same thing happens in NodeBB with code blocks. If you want inline code blocks, you have to use `. If you want multi-line code blocks, you have to use ```. So they cheat by using multiple tags.

    How can I get this to work with only one tag? Is there some regex tomfoolery that will find matching [spoiler] and [/spoiler] tags and tell me if there's any newlines, <p>s, or <br>s in between them?



  • Well, this seems to work:

    	// replace inline spoilers
    	var spoilers = /\[spoiler\].*?\[\/spoiler\]/g;
    	data = data.replace(spoilers, function(match) {
    		return '<span class="spoiler blur" onclick="toggleBlur(this);">' + match.substring(9, match.length - 10) + '</span>';
    	});
    	// replace multi-line spoilers
    	data = data.replace('[spoiler]', '<div class="spoiler blur" onclick="toggleBlur(this);">').replace('[/spoiler]', '</div>');
    


  • @NedFodder It's probably cleaner to use capturing parenthesis instead of match.substring.

    data = data.replace(/\[spoiler\](.*?)\[\/spoiler\]/g, function(_, data) {
             return '<span class="spoiler blur" onclick="toggleBlur(this);">' + data + '</span>';
    });
    


  • @PleegWat Thanks.

    Your post also pointed me to another issue: <pre> and <code> blocks (usually created by ` or ```). I went with the discoparser method and used MD5GUIDs to preserve the pre-formatted text. Seems to work.

    One more major problem: I developed everything with the default theme. I have to make sure everything works on the darker themes as well. :anguished:



  • I fixed the dark theme problem. Turns out you can specify more than one text-shadow, so the same CSS works on both light and dark themes.

    I think I'm done. I still can't fix images and links in IE or the "haze" on images in FF, both of those are beyond my skill.

    I published it to npm, probably incorrectly. I couldn't install it from the admin page, but a manual npm install nodebb-plugin-tdwtf-buttons seemed to work.

    I went through some of the old bug reports from the Discodays (like this and this), and copied the raw from those posts to my test NodeBB forum. It seems like this plugin works better than Discourse (well, at least it doesn't have the same bugs).

    @ben_lubar do you still have your test NodeBB instance? If so, do you feel like testing this out there?



  • @NedFodder said in Composer Buttons Plugin:

    @ben_lubar do you still have your test NodeBB instance?

    yes

    @NedFodder said in Composer Buttons Plugin:

    If so, do you feel like testing this out there?

    not really, but I'll give it a shot



  • @NedFodder any reason the spoiler one uses bbcode instead of <details>?



  • @ben_lubar

    1. <details> doesn't work on FF without some weird hack that @PJH knows but I don't know. It doesn't work at all on IE or Edge.
    2. I wanted the look and feel to be closer to what we had on Discourse.

    ETA:

    1. All the old Discourse posts with the bbcode syntax would automatically get fixed.


  • @NedFodder

    We have this in our custom header:

    /* Copyright (c) 2006-2013 Tyler Uebele * Released under the MIT license. * latest at https://github.com/tyleruebele/details-shim * minified by Google Closure Compiler */
    function details_shim(a){if(!(a&&"nodeType"in a&&"tagName"in a))return details_shim.init();var b;if("details"==a.tagName.toLowerCase())b=a.getElementsByTagName("summary")[0];else if(a.parentNode&&"summary"==a.tagName.toLowerCase())b=a,a=b.parentNode;else return!1;if("boolean"==typeof a.open)return a.getAttribute("data-open")||(a.className=a.className.replace(/\bdetails_shim_open\b|\bdetails_shim_closed\b/g," ")),!1;var c=a.outerHTML||(new XMLSerializer).serializeToString(a),c=c.substring(0,c.indexOf(">")),
    c=-1!=c.indexOf("open")&&-1==c.indexOf('open=""')?"open":"closed";a.setAttribute("data-open",c);a.className+=" details_shim_"+c;b.addEventListener?b.addEventListener("click",function(){details_shim.toggle(a)}):b.attachEvent&&b.attachEvent("onclick",function(){details_shim.toggle(a)});Object.defineProperty(a,"open",{get:function(){return"open"==this.getAttribute("data-open")},set:function(a){details_shim.toggle(this,a)}});for(b=0;b<a.childNodes.length;b++)if(3==a.childNodes[b].nodeType&&/[^\s]/.test(a.childNodes[b].data)){var c=
    document.createElement("span"),d=a.childNodes[b];a.insertBefore(c,d);a.removeChild(d);c.appendChild(d)}}details_shim.toggle=function(a,b){b="undefined"===typeof b?"open"==a.getAttribute("data-open")?"closed":"open":b?"open":"closed";a.setAttribute("data-open",b);a.className=a.className.replace(/\bdetails_shim_open\b|\bdetails_shim_closed\b/g," ")+" details_shim_"+b};details_shim.init=function(){for(var a=document.getElementsByTagName("summary"),b=0;b<a.length;b++)details_shim(a[b])};
    window.addEventListener?window.addEventListener("load",details_shim.init,!1):window.attachEvent&&window.attachEvent("onload",details_shim.init);
    


  • @boomzilla there's also this in the CSS tab:

    
    /* details shim for Firefox - https://github.com/tyleruebele/details-shim/blob/master/details-shim.css */
    details, summary {display: block;}
    details.details_shim_closed > * {display: none;}
    details.details_shim_closed > summary {display: block;}
    details.details_shim_open   > summary {display: block;}
    details.details_shim_closed > summary:before {display: inline-block; content: "\25b6"; padding: 0 0.1em; margin-right: 0.4em; font-size: 0.9em;}
    details.details_shim_open   > summary:before {display: inline-block; content: "\25bc"; padding: 0; margin-right: 0.35em;}
    


  • The buttons plugin seems to break the bold/italics buttons. They don't appear to do anything on click.



  • @ben_lubar Hmm, they work fine on my NodeBB instance.

    0_1460471795373_Capture.PNG

    Is this related to your changes to the composer for leading/trailing spaces?

    ETA: Or is it some buggy interaction with some other plugin? What plugins are you running that could add buttons to the composer?



  • @NedFodder ...strange. I just re-enabled the plugin and it works. :confused:


  • sockdevs

    @ben_lubar Heisenbug?



  • @ben_lubar Great, now blakey thinks I still don't test anything, thanks a lot! :stuck_out_tongue_winking_eye:


  • sockdevs

    @NedFodder He'd think that even if you printed a stack of testing documentation that stretched from here to the Moon ;)


  • Winner of the 2016 Presidential Election

    @RaceProUK Why did it get stuck on the moon? You clearly don't test your documentation stacks, you shitty incompetent open source developer


  • sockdevs

    @Jaloopa Ah yeah, that... y'see, there was this talking potato that was distracting me, and I accidentally opened a portal on the Moon, and it sucked my testing document through it before I could close it



  • @NedFodder said in Composer Buttons Plugin:

    Great, now blakey thinks I still don't test anything,

    Do you?


  • Impossible Mission Players - A

    @blakeyrat said in Composer Buttons Plugin:

    Do you?

    Does "WOMM" testing count?



  • @RaceProUK said in Composer Buttons Plugin:

    He'd think

    [citation needed]



  • BUMP

    So what's going on with this? If the spoiler thing is causing problems or just isn't ready for prime time, can we get the other stuff and leave that out for now?

    Oh, also, those don't seem to have tooltips. Is there a nodebb approved way to include internationalizable messages with plugins?



  • @boomzilla said in Composer Buttons Plugin:

    So what's going on with this?

    Issues I know about:

    • Images and links in spoilers don't work on IE, but everything else does.
    • Images in spoilers on FF look strange after they've been revealed.

    No one has let me know of any other issues.

    @boomzilla said in Composer Buttons Plugin:

    If the spoiler thing is causing problems or just isn't ready for prime time, can we get the other stuff and leave that out for now?

    I'm OK with doing that if that's the consensus. What does @ben_lubar think?

    @boomzilla said in Composer Buttons Plugin:

    those don't seem to have tooltips.

    The function for adding a button doesn't give me a way to pass down the title for the tooltip. Probably an oversight on their part. I have a workaround, but I pinged community.nodebb.org to see if there's a better way than what I'm doing.

    What should the tooltips for ins/del, abbr, and spoiler be?

    @boomzilla said in Composer Buttons Plugin:

    Is there a nodebb approved way to include internationalizable messages with plugins?

    Not sure, we should ask the NodeDevs.



  • @boomzilla said in Composer Buttons Plugin:

    internationalizable messages with plugins?

    It's actually pretty easy:



  • @NedFodder said in Composer Buttons Plugin:

    @boomzilla said in Composer Buttons Plugin:

    If the spoiler thing is causing problems or just isn't ready for prime time, can we get the other stuff and leave that out for now?

    I'm OK with doing that if that's the consensus. What does @ben_lubar think?

    Can you make the spoiler thing use <details><summary>[some text here that is selected]</summary><p>[content that was highlighted]</p></details>



  • @ben_lubar said in Composer Buttons Plugin:

    Can you make the spoiler thing use <details><summary>

    Yes, it's easy to do, but that has at least two problems:

    1. Old Discourse posts with [spoiler] tags will still be unhidden (blakey complained about this recently)
    2. I'm pretty sure <details><summary> doesn't work at all on MS browsers. (Can someone confirm?) My solution doesn't hide images or links on IE, but at least will hide text.

    Why don't you want spoilers the way we had them on Discourse? What does everyone else think?



  • @NedFodder said in Composer Buttons Plugin:

    Why don't you want spoilers the way we had them on Discourse?

    they were hard to see, easy to break, and when they did work, they worked differently than all other forums.



  • @ben_lubar said in Composer Buttons Plugin:

    hard to see, easy to break

    I've tried to address those. The unhidden text is the same as plain text (like on SO) instead of lighter text (like on Discourse). I tested lots of posts from Discourse that were broken before that don't look broken with my plugin.

    Have you tried it out? Is there something that is still hard to see or easy to break?

    @ben_lubar said in Composer Buttons Plugin:

    worked differently than all other forums

    We had it the Discoway for a couple of years, I'd say we're pretty used to it.



  • @NedFodder said in Composer Buttons Plugin:

    We had it the Discoway for a couple of years, I'd say we're pretty used to it.

    It was fine for text. Images were always breaking in weird ways.



  • I saved our old custom CSS / js. These were the tooltips for the composer buttons:

    • del/ins correction
    • add abbr tag
    • add [spoiler] tag


  • @boomzilla said in Composer Buttons Plugin:

    can we get the other stuff and leave that out for now?

    Done. I've published an update (v0.4.0) with just del/ins and abbr buttons. I added hooks to internationalize the tooltip text, but I also set en_GB as the default language so we won't see any ugly composer.formatting.bold garbage.



  • Created a new branch for the spoiler stuff:


  • Discourse touched me in a no-no place

    @ben_lubar said in Composer Buttons Plugin:

    [:disco::horse: spoilers] were hard to see, easy to break, and when they did work, they worked differently than all other forums.

    So, par for the Discourse, then?


  • Discourse touched me in a no-no place

    @NedFodder said in Composer Buttons Plugin:

    doesn't work at all on MS browsers.

    I can confirm that <details> doesn't work on IE11 and Edge, the latest Insider Preview (14332).


Log in to reply
 

Looks like your connection to What the Daily WTF? was lost, please wait while we try to reconnect.