Code blocks inside spoiler tags are displayed incorrectly

[UnlimitedCookies]

Steps to reproduce

Writing /spoiler and then inserting ``` right after, then the code in multiple lines and then ``` again in its own line yields some weird reformatting, that definitely does not what we are looking for.

Also the following command does not yield a proper code block:

/html <span data-mx-spoiler><pre><code class="language-rs">fn main() {
    println!("Hallo Alex!");
}</code></pre></span>

Outcome

I expect code blocks inside spoiler tags to correctly highlight and display the line numbers inside the code block.
There should also be a way to nest a code block inside a spoiler tag without needing to type the HTML manually.

Operating system

Arch Linux

Browser information

Firefox 132.0.2

URL for webapp

No response

Application version

No response

Homeserver

matrix.org

Will you send logs?

No

[alexanderthiem]

Same issue for
Windows
Edge: Version 131.0.2903.86 (Offizielles Build) (64-Bit)
Server tchncs

[alexanderthiem]

What about instead of having the runfn in "element-web/src/SlashCommands.tsx" using the ContentHelpers.makeHtmlMessage()
which is imported from the as far as I know read only repo "matrix-js-sdk/src/matrix" simply create the html just as for normal messages:
call either
element-web/src/components/views/rooms/SendMessageComposer.ts#createMessageContent
or the function
element-web/src/editor/serialize.ts#htmlSerializeIfNeeded
with the reduced input string (aka remove the /spoiler) then afterwards wrap the formatted_body into the <span spoiler>.
(or even check isshlashcommand->getShlashcommand -> RunSlashcommand to allow for nested commands)

I think this also could solve some of the related problems as well:

• spoiler reduces the whole text to one line,

• avoid exploding escape characters from editing:
  currently, /html simply takes the html without unescaping anything, shows the html, when the message is edited, all html are removed and the most inner html is shown, correctly escaping special characters
  /spoil also takes the rest of the string as html, without unescaping anything, when the message is edited though, the deserialiser (element-web/src/editor/deserialize.ts) deserialised the /spoil command as well as escaping special characters.
  If the edited message is sent again though, there will be no unescaping, even though the deserialiser escaped this.

/tableflip and similar treat the rest of the line just as /plain does, so here every markdown or html is ignored too. why not allow nested commands here as well?

So all I could think of the following changes to allow for a cleaner and intuitive command and editing experience:

• allow markddown/nesting after speicific commands (spoiler, tableflip etc) by formatting the args or checking for recursive commands
• dont escape children of spoiler tag in deserialize
• add a html span to deserialize html as well (and maybe spezialcase deserialisation of children to show the inner html too-afterall it was typed by the user)

[t3chguy]

which is imported from the as far as I know read only repo

Sorry how is it read-only

why not allow nested commands here as well?

Contributions welcome, keep in mind the autocomplete would have to work still, and you'd somehow have to be able to mark the end of a sub-command, so I don't forsee this being easy to implement nor grok as a user.