How to create a spoiler tag extension for react-markdown?

[novacrazy]

I'm trying to add a spoiler functionality to react-markdown, using a simple syntax such as ||spoiler text|| that converts to <ins>spoiler text</ins> or <span class="spoiler"> or a custom component as mentioned below, but basing it off the GFM strikethrough code doesn't seem to work correctly. Is there special handling for delete nodes somewhere that I'm missing? How can I add new node types?

This is the third time I've tried to write such an extension in 9 months, and it's just a genuine nightmare to navigate this and related projects. There is so much special and undocumented behavior hidden away that using the GFM extension as a basis for other things seems useless.

The remark-math and rehype-katex packages are possibly closer, as I'm guessing the rehype plugin is what actually handles the new nodes, but those replace the inner text rather than wrap it so I'm at a loss.

Furthermore, ideally I'd like to be able to use a custom component (via components of react-markdown) for the spoiler, so it can remain visible after clicked. I have less than zero idea how to extend any of this to the point it can be included in components.

Any advice or examples would be appreciated.

[wooorm]

See § Extending markdown and § Creating a micromark extension on how to create extensions that change the markdown syntax. You might want to read up on unified as well.

My recommendation, though, is probably: don’t do this.

[wooorm]

Please, read the links, they explain what is possible and recommended and why. From that, you can see how the first part of your sentence does not lead to the second part of your sentence: directives! HTML! JSX!

[srevenant]

Yeah, thanks but nah. I'll just find another library. I don't need a comment from somebody saying they've made a judgement but unwilling to explain it, instead enigmatically saying "go RTFM" — I'm not interested in the FM, I'm interested in why you made said judgement. Your "help" is anything but. I want to have a standard ||spoiler|| parser. Those FM's don't explain this, and ad-hominem attacks of "don't be entitled" also don't help.

[ChristianMurphy]

CommonMark and GFM are the markdown standards, extending beyond that is a bad idea as it creating more mental overhead for the people authoring content, and more maintaince load on your part.
This is explained at some length and detail in https://github.com/micromark/micromark#extending-markdown along with some alternative approaches.

And yeah it is pretty entitled to attack authors who wrote a guide helping you, and are giving you support for free, because you are too lazy to open the link and read it.

All that said. You are welcome to make your own life miserable creating and maintaining yet another markdown flavor if you want. Good luck with that. ✌️

[ChristianMurphy]

If you want a more standard approach see https://github.com/orgs/remarkjs/discussions/860#discussioncomment-1374622

[JounQin]

@srevenant I believe you even didn't try to search... 😅

https://www.npmjs.com/package/remark-inline-spoiler

https://www.npmjs.com/package/remark-spoiler

Maintainers here are not your personal AI assistants.

[ChristianMurphy]

@novacrazy rather than starting with custom syntax, it may be good to start with directives which are semi-standard and already supported.
For example it could look like:

Some *emphasis*, **importance**, :spoiler[custom **spoiler** *text*] and `code`.

https://astexplorer.net/#/gist/696c66f1910bbbe57b81d2573668d038/c583afaa8151d92c8eb076918ed27fa529841c30

As @wooorm notes, writing a custom parser can be complex and time consuming, both to write initially and to maintain over time, whether it's written for remark or another markdown parser.
You are welcome to write one if you want, just be aware of what you are signing up for, and that there are alternatives.

The process of extending remark/micromark is documented at https://github.com/micromark/micromark#extending-markdown

[novacrazy]

My solution is to move to https://github.com/Khan/simple-markdown (which actually turns out to be the same lib Discord uses)

var spoilerRule = {
    match: function(source) {
        return /^\|\|([\s\S]+?)\|\|(?!\|)/.exec(source);
    },
    parse: function(capture, parse, state) {
        return { content: parse(capture[1], state) };
    },
    react: function(node, output, state) {
        return <CustomSpoiler key={state.key}>{output(node.content, state)}</CustomSpoiler>
    },
};