How to render Markdown as text when disabling certain elements?

[rfgamaral]

Hello,

Imagine that I'm using react-markdown like this:

<ReactMarkdown
    disallowedElements={['hr', 'strong']}
    unwrapDisallowed={true}
>

This will happen:

• When giving an input like **strong**, strong will be rendered (because strong element is disabled).
• When giving an input like ---, nothing will be rendered (because hr element is disabled).

What I need to happen:

• When giving an input like **strong**, **strong** should be rendered.
• When giving an input like ---, --- should be rendered.

In other words, for disallowed elements, do not drop the Markdown, and render it as plain-text instead.

Is there a setting for this, or any way to configure react-markdown to work like this?

[ChristianMurphy]

Taking a few steps back, could you expand a bit on your use case?
It sound like you don't want markdown to render as HTML, will that be most or all constructs?
If so consider using plain remark to transform markdown back to markdown.

If you do want to continue down the route of using react-markdown with a subset of markdown.
It is technically possible, though not necessarily advisable, sticking with a standard like commonmark or gfm works better for authors.
micromark the parser that powers remark and react-markdown can disable constructs https://github.com/micromark/micromark#case-turn-off-constructs
this can be done through a remark plugin.

Some related discussion: #757 and #921

[rfgamaral]

Hi @ChristianMurphy, thanks for helping out!

Taking a few steps back, could you expand a bit on your use case?

We use react-markdown to render all our Markdown based content on Todoist, and our task title editor (singleline editor) only supports inline rich-text elements (like bold, italic, strikethrough, inline code, links, etc.), but it does not have support for block rich-text elements (like code blocks, blockquotes, or horizontal rules).

So, if users create a task with ***, the editor does not recognize this and leaves the text as-is (which is expected). However, when rendering, react-markdown will render this as <hr>, but since we don't support this block element on this specific editor, we need to disable the render for horizontal rules, and keep the text as typed by the user.

It sound like you don't want markdown to render as HTML, will that be most or all constructs?

Only for very specific scenarios and constructs, not all of them.

If so consider using plain remark to transform markdown back to markdown.

This is not an option, we need a bunch of other features that react-markdown gives us.

micromark the parser that powers remark and react-markdown can disable constructs https://github.com/micromark/micromark#case-turn-off-constructs this can be done through a remark plugin.

Actually, we've already been doing this for a while, but I'm not quite sure how to disable horizontal rules with this technique. I don't think there's a construct for that, but I could be wrong.

[wooorm]

I'm not quite sure how to disable horizontal rules with this technique

https://github.com/micromark/micromark/blob/main/packages/micromark-core-commonmark/dev/lib/thematic-break.js

This is not an option, we need a bunch of other features that react-markdown gives us.

react-markdown is a wrapper around remark and friends, so you can definitely go with remark and friends!
react-markdown tries to simplify things: you get a few options for common things, but it doesn’t give you very fine grained access that you have with remark and friends.
If you want to do more complex things, remark and friends is a very good choice!

---

Generally tho: strong is inline “richt” stuff. I see no need for you to disable that.
I can somewhat see a usecase for only supporting “inline” things (so no code blocks, no thematic breaks), but I still see that as a bad idea generally: go with spec-compliant markdown instead of your own custom language and the world’s a better place!

[rfgamaral]

@wooorm Thank you, the thematicBreak fixed it. It's the first time I'm seeing that name for horizontal rules, no wonder I couldn't find it 😅

Generally tho: strong is inline “richt” stuff. I see no need for you to disable that.

Actually, we don't want to disable that, it was just an extra example alongside horizontal rule, to explain what I was looking for.

I can somewhat see a usecase for only supporting “inline” things (so no code blocks, no thematic breaks), but I still see that as a bad idea generally: go with spec-compliant markdown instead of your own custom language and the world’s a better place!

For this particular case we are talking about a singleline input field that will render a singleline of text, thus all block elements need to be disabled for this particular input field.

[spark33]

I think there's a pretty easy workaround. I made it work using the components prop. I needed to render time ranges like Mon~Fri 9am~6pm without having them render as strikethroughs, so I just used:

const Markdown = ({ components, ...rest }) => {
return (
   <Markdown
      components={{
        del: ({ children, ...rest }) => <span {...rest}>~{children}~</span>,
        ...components,
      }}
      {...rest}
   />
)};