When I write an answer I find it very time consuming to add the spoiler tag to every line so I have written a small script that do it for me.

 How to use it ?

  • select the text
  • right click on it
  • click "add spoiler"

enter image description here

How does it work ?

For each line of the selected text :

  • it adds >! at the beginning of each line ( it changes an existing > to >! and does not add a new spoiler tag if there is already one )
  • it adds two whitespaces at the end of the line to create a new line

This option is only available on PSE in questions and answers areas.

How to install it ?

To use user scripts you need to first install a user script manager.
For Firefox: Greasemonkey.
For Chrome: Tampermonkey

Then go on Greasy Fork and click on the green button "install this script".

( I've only tested it on Firefox)

The code

// ==UserScript==
// @name            Add spoiler tag for PSE
// @description     Add the "add spoiler" button in the right click menu
// @version         1
// @author          Lord of dark
// @require       http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// @include         http://puzzling.stackexchange.com/*
// ==/UserScript==

this.$ = this.jQuery = jQuery.noConflict(true);  // use jquery has no conflict

if (!("contextMenu" in document.documentElement &&
      "HTMLMenuItemElement" in window)) return;

var body = document.body;
body.addEventListener("contextmenu", initMenu, false);

var menu = body.appendChild(document.createElement("menu"));
menu.outerHTML = '\

document.querySelector("#userscript-spoiler menuitem")
        .addEventListener("click", addspoiler, false);

function initMenu(aEvent) {
  // Executed when user right click on web page body
  // aEvent.target is the element you right click on
  var node = aEvent.target;
  var item = document.querySelector("#userscript-spoiler menuitem");
  if (node.localName == "textarea") {
    body.setAttribute("contextmenu", "userscript-spoiler");
  } else {

function addspoiler(aEvent) {
   var textareas = document.getElementsByTagName("textarea");
   var nb = textareas.length;
   for (var i=0;i0){
        // Select text and edit it
        var spoilered = sel.replace(/^[>! ]*/,">! ");
        spoilered=spoilered.replace(/ *\n[>! ]*/g, "  \n>! ");

        // Replace the selected text with this one
        textarea.value =  textarea.value.substring(0,start) + spoilered + textarea.value.substring(end,len);
        // trigger event to update the "preview"
        var ev = document.createEvent("KeyboardEvent");
            ev.initKeyEvent("keypress", true, false, window, 0, 0, 0, 0, 13, 13);

Bug, edits and to-do list

I have shared it on the meta so every body can use it and improve it. Feel free to suggest edit or report a bug in the answers/comments.

I think we can improve this list to handle more things in the "auto spoiler" process. For example we could change the - at the begining of a line to <ul><li>...</ul> to handle the lists items.

Another possible improvement could be to add a button instead of the right click

| |
  • 1
    $\begingroup$ Ideally, instead of changing > into >!, you might want to convert it to <blockquote>, the same way you suggested fixing up list markdown. That would allow you to have blockquotes within the spoiler. $\endgroup$ – GentlePurpleRain Jun 22 '16 at 16:02
  • 1
    $\begingroup$ Is this on Stack Apps yet? $\endgroup$ – wizzwizz4 Jul 4 '16 at 6:35
  • $\begingroup$ @wizzwizz4 Why should I put it on Stack Apps ? $\endgroup$ – Fabich Jul 5 '16 at 16:43
  • $\begingroup$ Testimonial: Came in handy when a poster requested spoiler relief! (Quirk that surfaced: the edit bypasses ctrl-Z/ctrl-Y history.) $\endgroup$ – humn Jul 5 '16 at 18:12
  • $\begingroup$ @Lordofdark Because that is where userscripts should go, if they work network-wide. It'd be handy for other people too, not just Puzzling users. Science Fiction & Fantasy, Movies & TV... $\endgroup$ – wizzwizz4 Jul 5 '16 at 20:05

You must log in to answer this question.

Browse other questions tagged .