Sending spoilers

[Sorunome]

Is your suggestion related to a problem? Please describe.
Recently rendering spoilers has been merged into riot develop, the problem is now that there is no way of sending them!

Describe the solution you'd like
Sending spoilers as extended markdown like ||spoiler|| and ||reason|spoiler|| seems reasonable.

Describe alternatives you've considered
None, this could be a discussion!

Additional context
||spoiler|| neatly aligns with existing messaging services (e.g. Discord). As for the extended ||reason|spoiler|| it seems similar enough to just a plain spoiler to implement.

[Sorunome]

A different markdown parser that is more easily customizable would greatly simplify this step, and would also allow things like ~~strikethrough~~. Is there a chance of changing the markdown parser?

[t3chguy]

Is there a chance of changing the markdown parser?

I believe there is scope for this as the experience with CommonMark is kind of unsuitable IMO, especially for markdown in links which is not easily fixable from the consumer level. GFM would be a good shout but I don't see it being extensible to adding spoilers

[aaronraimist]

Links to the MSC https://github.com/Sorunome/matrix-doc/blob/soru/spoilers/proposals/2010-spoilers.md

and PR for viewing spoilers matrix-org/matrix-react-sdk#3018

[grinapo]

• Stackexchange uses >! spoiler for lines - but it won't suit spoiler words.
• Discord use ||spoiler|| for inline spoilers. - that's pretty bad for anything containing multiple pipes
• Reddit uses [] (#s "Spoiler Filled Text") - convoluted...
• Github uses <details> spoiler </details>, others <spoiler>spoiler text</spoiler>. This doesn't mess up normal text.

I'd go for <spoiler>xx</spoiler> or the S.E. syntax for lines, but that's just me.

[Sorunome]

custom tags are pretty much ruled out IMO as the msc specifically added an attribute to the the span tag to not need to do custom html tags

[dkasak]

The pipe syntax is really nice, IMO, and it has the additional benefit of familiarity for Discord users. I don't see multiple pipes in ordinary text as being common enough to warrant dismissing this syntax because of that. The same could be said for a lot of other Markdown special characters.

For situations where you really need pipes, there's /plain ... in Riot. For cases where it occurs in code, code blocks should be used instead anyway.

[theotheroracle]

Apparently the mobile version of riot uses /spoiler? i'm not sure why that's not implemented here already.

[grinapo]

@SaturnSoftware yes but it's only for the whole line, cannot spoilermark words.

[Huy-Ngo]

I've seen bots being able to do this (they are bots bridging the chatroom with discord), so I suppose there must be already a way.

[t3chguy]

Bots don't use Element.
Element can already render spoilers, just has no way for users to send them.

[Sorunome]

I've seen bots being able to do this (they are bots bridging the chatroom with discord), so I suppose there must be already a way.

yes, /html <span data-mx-spoiler="reason">spoiler content</span>

[shmerl]

Using /html ... works, but if you edit that message in element, it stops rendering the spoiler. Is there a way to edit it too?

[shmerl]

Is there any way currently to send an image as a spoiler, not just text?

[theotheroracle]

as a workaround, you can nest an <img> tag in a <span data-mx-spoiler> tag, but you'd have to upload the image first and get the mxc, there's also no current solution for encrypted rooms .

[theotheroracle]

Using /html ... works, but if you edit that message in element, it stops rendering the spoiler. Is there a way to edit it too?

you'd have to use devtools

[shmerl]

you'd have to upload the image first and get the mxc, there's also no current solution for encrypted rooms .

How do you get an mxc for an image uploaded to somewhere on Matrix and how should it be referred to in <img> tag? Or is it the regular URL of the image that you can find once it's uploaded?

[shmerl]

I tested something like this with external image, but that didn't work:

/html <span data-mx-spoiler="spoiler"><img src='https://someurl'/></span>

[theotheroracle]

no, you can't use http to reference images, only mxc urls are accepted, if you click the three dots and view the source of an image, you can see the mcx:// url

[shmerl]

It worked, thanks! Blurring on images is pretty weak though. Should I open a separate bug about it?

[theotheroracle]

if there isn't one already

[shmerl]

I didn't find anything, so I opened vector-im/element-web#16412.

[robintown]

For the time being, would it be helpful to just add a /spoiler command like the one on Android? I could do that easily.

[shmerl]

That would be much nicer than using tags explicitly. But for images there might be a need to have an option to add that during upload.

[theotheroracle]

if there was an option to spoiler images, it would also be helpful to add an image description field, since it would be an inline image anyways, it wouldn't really be difficult to implement

[gabrc52]

The ||spoiler|| syntax would certainly be helpful for inline spoilers.

For backwards compatibility, the client could translate it to the HTML format before sending, and a similar way to enable editing.

[t3chguy]

For backwards compatibility, the client could translate it to the HTML format before sending

that's what it would have to do - clients don't render incoming markdown, given that dialects vary so much. The messages on the wire are a Matrix defined subset of HTML.

[TheSmallTeaBoi]

Any news on this?

[SimonBrandner]

You can now send a spoiler message using /spoiler <message>

[TheSmallTeaBoi]

what about single words?

[t3chguy]

That's why this issue is not closed yet. Any updates on that will be right here. But given it is marked as Help Wanted - anyone can pick it up.

[theotheroracle]

it's blocked by the switch from commonmark i think ?

[TomMettam]

Please add support for spoiler images, too.

[shmerl]

I think images should already work, but blurring can be improved. See related: vector-im/element-web#16412

[TomMettam]

@shmerl Ah right, but is there a way to do this when attaching an image? Or just linking to one?

[shmerl]

yeah, there should be some UI / syntax options for that that are currently absent.

[robintown]

Spoiler images actually need a spec change to be properly supported, since sending images inline isn't an adequate solution for encrypted rooms.

[robintown]

I've created an MSC for media spoilers, and split their implementation out into a couple of new issues: element-hq/element-web#18061 https://github.com/vector-im/element-web/issues/18062. If you have ideas for the designs, I encourage you to drop them in there, as it'll help me have a sane first draft to present for design review once I implement this.

[kittykat]

@Sorunome given that we have /spoiler now, does that satisfy your original request or do you feel that there are additional improvements to be made? (Everyone else, please feel welcome to speak up 👍 )

[SimonBrandner]

@Sorunome given that we have /spoiler now, does that satisfy your original request or do you feel that there are additional improvements to be made? (Everyone else, please feel welcome to speak up +1 )

We can't do Hello world, this is a ||spolier|| or make images (and other things) spoilers

[ShadowJonathan]

We can't do Hello world, this is a ||spolier|| or make images (and other things) spoilers

Could you elaborate? Is this because of limitations with commonmark libraries?

[SimonBrandner]

We can't do Hello world, this is a ||spolier|| or make images (and other things) spoilers

Could you elaborate? Is this because of limitations with commonmark libraries?

Ah, I didn't mean that it is technically impossible (I have no idea, but I imagine it is possible). I was simply saying you can't send a message like that in Element atm, afaik

[sumnerevans]

Another possible syntax is the Reddit-style:

This is >!spoiler text!<