30
$\begingroup$

As a part of the Community Asks Sprint last month, we worked on a couple of improvements to spoilers which are outlined in this Meta Stack Exchange post. The biggest change for Puzzling is the addition of spoilers in comments - it’s something you’ve been needing for a long time, and I was happy to finally get a chance to implement it!

The syntax is as follows:

[!put your spoiler here!]

This will render a grey box similar to the one you see in posts with spoilers, with “reveal spoiler” text. It’s also accessible via keyboard tabbing. Spoilers can be clicked (or you can hit ‘enter’ when they are focused) to reveal them.

We are launching spoilers in comments on PSE first in order to test it before we expand to other sites that currently use spoilers. If you experience any bugs or have any feedback on the functionality, please share that in an answer to this post. I will be monitoring it until next Friday, November 14. After that date, please create a separate bug report on Puzzling meta as you would otherwise so that it can be handled via our normal process for triaging bugs.

Thanks for waiting so patiently and rot13(fcraqvat fb zhpu bs lbhe gvzr hfvat fuvsg pvcuref gb trg nebhaq yvzvgngvbaf).

Edit: enter-to-reveal is not working for comment spoilers as intended, will update once fixed.

Edit: enter-to-reveal is fixed and working now for comments, still fixing for posts!

[mod edit]: enter-to-reveal is working for posts as well now

$\endgroup$
3
  • $\begingroup$ reveal spoilerDoes it work here on meta as well? apparently it doesn't - I know feature toggles for meta are separate but for most site-specific features, it makes sense to have them enabled on the meta as well. $\endgroup$ Commented Nov 4 at 18:43
  • $\begingroup$ good point, I toggled it on meta here too! $\endgroup$ Commented Nov 4 at 18:49
  • $\begingroup$ @Glorfindel reveal spoilernow it does! $\endgroup$ Commented Nov 11 at 14:08

7 Answers 7

Reset to default
3
$\begingroup$

There seems to be a bug in the formatting when there are links after the spoiler in the comment, as can be seen in bobble's screenshot:

I'll post a comment like this below this answer:

[!This is a spoiler!] and [this is a link](https://example.com) to verify the bug report.

and as expected, it didn't really work out as intended, though the error is slightly different:

enter image description here

$\endgroup$
2
  • 1
    $\begingroup$ reveal spoilerThis is a spoiler and this is a link to verify the bug report. $\endgroup$ Commented Nov 4 at 19:02
  • 3
    $\begingroup$ okay - this issue has been mostly fixed (the fix will be live tomorrow). for now, adding links inside spoilers with markdown-type styling is not supported (before and after is fine, and without the square brackets and parens is fine!), because that will be a much bigger fix. $\endgroup$ Commented Nov 4 at 22:21
2
$\begingroup$

.comment-author has the class mt4 (leading to a gap between the last and the penultimate line of comment, or just a general gap if it's single-line), which gets removed after the spoiler is revealed, which leads to a somewhat unpleasant visual change.

Was the top margin of

enter image description here

mt4 is actually on every comment, not just ones with spoilers. I haven't been active here in the last few months, but I don't remember such a gap and it's not present on eg. codegolf SE, so I'm assuming this was added for the spoilers.

If this margin is necessary for something, it might be preferable to

  1. not remove it after spoiler reveal, to keep it consistent
  2. remove it from comments without spoilers, because it looks better without the gap

If it's not necessary, I would remove the margin altogether.

Here's how it would look without:

enter image description here

EDIT:

It was probably added because to prevent this effect:

enter image description here

Note that this margin gets removed after one spoiler has been revealed, not all of them, I didn't tamper with the code in the image above.

$\endgroup$
2
  • 2
    $\begingroup$ you're right about why it was added! looking into how to fix this, thanks. $\endgroup$ Commented Nov 4 at 19:49
  • 2
    $\begingroup$ okay, I went ahead and removed the extra margin for now. It does cause a bit of crowding in certain circumstances, we may revisit later, but at least we're avoiding the extra line height everywhere. the fix is in but probably won't be live until tomorrow! $\endgroup$ Commented Nov 4 at 22:14
2
$\begingroup$

If I've already revealed a comment spoiler, and then I click to "Show N more comment(s)", the spoiler re-hides itself. Would be nice to not have to re-reveal. Example question.

$\endgroup$
1
$\begingroup$

Using Firefox (both on my phone, which I'm aware isn't a supported browser, and on my computer) and I've just noticed that clicking on comment spoilers often leads to all the text being selected. I'm not purposefully selecting the text. Just tapping/clicking to reveal triggers a select action.

This doesn't happen for all spoilers, nor does it happen 100% of the time for the spoilers where it occurs, but it's still weird. Why would this be happening?

$\endgroup$
0
$\begingroup$

Is it intended that the length of the comment spoiler is misleading? Consider the example in this question's comments:

hidden comment spoiler with "reveal spoiler" text

Spoiler shortens post-reveal:

revealed comment spoiler with underlying text

It seems there should be plenty of room to put the "reveal spoiler" text within the same space as the post-reveal spoiler takes up. It's unexpected that clicking on the spoiler would make text elements move around. In questions/answers spoilers are always the same size before and after revealing.

$\endgroup$
2
  • 7
    $\begingroup$ There is actually something to be said for making the width of the spoiler not consistently the same as that of the underlying text -- less information about the spoilery text gets leaked that way. $\endgroup$ Commented Nov 4 at 19:11
  • 7
    $\begingroup$ This is an artifact of how I implemented it - I had to work within the constraints of how comments are already rendered. If it ends up feeling like a big issue I can revisit. Errr, I mean, it was on purpose to leak less information about spoiler text! $\endgroup$ Commented Nov 4 at 19:14
0
$\begingroup$

Spoiler formatting seems to override inline code. For example:

The syntax for a comment spoiler is `[!spoiler text!]`

or

To make a spoiler in comments, wrap the text with `[!` and `!]`

both rendered as spoilers when I tried them on main-site. I ended up using

the syntax is to wrap it with `[` `!` and `!` `]` -- no need to go through the trouble of rot13 any more :)

which feels way overkill just to override the syntax. The below comment should reproduce this formatting; I copy-pasted the first two codeblocks verbatim.

comment with spoilers rendered instead of inline code

$\endgroup$
2
  • $\begingroup$ Copy-pasts of my first two code blocks: The syntax for a comment spoiler is reveal spoilerspoiler text / To make a spoiler in comments, wrap the text with reveal spoiler and $\endgroup$ Commented Nov 5 at 5:13
  • 1
    $\begingroup$ Yes, it does do that because of the way it interacts with markdown. For now you can add spaces in between them, e.g. spoiler syntax is [ ! spoiler here ! ] (no spaces). it will take a lot of time to fix this so I'll status-defer it for now. If this workaround ends up being too clunky we can revisit at some point in the future. $\endgroup$ Commented Nov 5 at 14:40
0
$\begingroup$

Links inside spoiler blocks within posts do not navigate to the target URL when clicked. (This is not about spoilers in comments, but about the spoilers within the post itself. However I do recall it worked as intended before, so it is probably related to this.)

Apparently [!spoiler text!] syntax doesn't work for posts, so we have to go by the old syntax >! spoiler text.

Text used to verify: This is a [link](https://example.com).

Normal text:
This is a link.

New syntax for spoilers in comments:
[!This is a link.!]

Old syntax for spoilers in posts:

This is a link.

$\endgroup$
2
  • $\begingroup$ Test: [!This is a [link](https://example.com).!] renders !This is a [link.!] $\endgroup$ Commented Nov 11 at 14:44
  • $\begingroup$ I answered this here but right now, markdown-style links inside spoilers are not supported. We might add that in the future, but for now you can add a regular link reveal spoiler here is example.com but that's it. $\endgroup$ Commented Nov 11 at 16:46

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.