support spoiler tags

[devzzm]

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

support spoiler tags in comments in the form of

::: spoiler label
Hidden text
:::

Describe the solution you'd like
A clear and concise description of what you want to happen.

Text hidden until you click on it

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

[gon555551]

I really hope this gets implemented!!!

[hjiangsu]

For this, we would need to add in some custom logic to the Markdown parser to be able to detect spoiler tags as I think this is not something native to Markdown

Another point with this is that we should then support adding spoiler tags when creating or editing posts/comments

[CTalvio]

I did some experimenting with this.

Markdown does "support" collapsible content, like this:

<details>
  <summary>Spoiler warning</summary>
  
  Spoiler text. Note that it's important to have a space after the summary tag. You should be able to write any markdown you want inside the `<details>` tag... just make sure you close `<details>` afterward.
  
</details>

But this is really working using html. This example works when testing with this: https://dart-lang.github.io/markdown/

But for obvious reasons, doesn't when using a flutter markdown library.

And Lemmy has it's own syntax for spoiler with the triple colon.

[micahmo]

I believe at some point we may need to fork flutter_markdown (which unfortunately is in a repo with all of the other first-party packages), since there are probably some other things we'd like to tweak as well (e.g., detecting ! as part of a hyperlink for communities).

https://github.com/flutter/packages/tree/main/packages/flutter_markdown

[hjiangsu]

We might not need to fork the markdown package. I think you can extend the package to add in custom syntax logic: https://pub.dev/documentation/markdown/latest/markdown/ExtensionSet-class.html

[micahmo]

I started taking a look at this, and I think we may need to fork flutter_markdown after all.

For some background, I was able to add a custom BlockSyntax for parsing markdown spoilers. You can see it here.

https://gist.github.com/micahmo/9ed15cb884b79850a787816e1f9af497

Using just the markdown library, this syntax extension works great to generate HTML.

Input

void main() {
  print(
    markdownToHtml(
      """### This is a title

This is a body
::: spoiler This is my spoiler title
This is my spoiler body
:::

And more...""",
      blockSyntaxes: [
        SpoilerBlockSyntax(),
      ],
    ),
  );
}

Output

<h3>This is a title</h3>
<p>This is a body</p>
<details><summary>This is my spoiler title</summary><a>This is my spoiler body</a></details>
<p>And more...</p>

Rendered

So far so good!

However, once we pass that through flutter_markdown, it fails. I believe this is because it doesn't account for nor have a way to style the details tag. Take a look at the supported tags here.

https://github.com/flutter/packages/blob/main/packages/flutter_markdown/lib/src/style_sheet.dart

As a result, I get a null issue on this line, where it assumes that the given tag will be in the list when it is not.

https://github.com/flutter/packages/blob/main/packages/flutter_markdown/lib/src/builder.dart#L632

If anyone else would like to give it a try and let me know if I'm missing something, I'd appreciate it!