Cannot add my React Component into components={}

[piscopancer]

import CommentBlock from '@/components/comment-block'

<ReactMarkdown
  components={{
    table: ({ children }) => (
      <div className='my-16 overflow-x-auto max-md:my-8'>
        <table>{children}</table>
      </div>
    ),
    commentblock: ({children}) => <CommentBlock>{children}</CommentBlock> // error
 }}
>
{article.text}
</ReactMarkdown>

I cannot register my custom component when tag is commentblock.
I have already figured out that a <CommentBlock>💖</CommentBlock> retrieved from a markdown

# heading 1

<CommentBlock>💖</CommentBlock>

# heading 2

is then transformed by react-markdown into a <commentblock>💖</commentblock> tag on the page. Now can you explain how I can replace this commentblock with my own react component?

export default function CommentBlock({children}: {children: React.Node}) {...}

[ChristianMurphy]

Welcome @piscopancer! 👋
Some context react-markdown support Markdown, which in turn can embed HTML.
What you are showing is JSX, which is different from HTML.

If you directly want to support JSX, consider using https://mdxjs.com/ (which builds on the same libraries and has the same maintainers).

If you want to do this through markdown, this can be supported through directives (with different syntax than what you show) https://github.com/remarkjs/remark-directive
There are a number of existing discussions which give example of how this can look https://github.com/orgs/remarkjs/discussions?discussions_q=is%3Aopen+directive+react-markdown and remarkjs/react-markdown#564

[ChristianMurphy]

so that it can recognize my ::commentblock in the text?

Exactly

I thought it would be as easy as just giving ReactMarkdown component a config and there I go, it's working already.

react-markdown can leverage HTML in Markdown https://github.com/remarkjs/react-markdown#appendix-a-html-in-markdown
But again HTML and JSX are not the same, and the differences matter.
If you want to fully support JSX, MDX is the way to go.

[piscopancer]

I would use MDX for sure, but the problem is that everywhere I see MDX, I also see that they import components from folders into the MDX file which I cannot afford because the text is stored on the CMS and I query markdown strings from Sanity to display articles. I have ALWAYS seen that MDX is created locally only, no tutorials with MDX being queried from databases. So I probably have no way to use MDX. Do you mean that the best I can do now is go and write my custom remark directive plugin? If you say, I will do.

[ChristianMurphy]

MDX can absolutely have content pulled from databases.
It can do this both client side (as react-markdown does), or can do this server side (though Next, Astro, Gatsby, etc).

Links:

• client side browser rendering: https://mdxjs.com/packages/mdx/#evaluatefile-options
• integrations with other platforms: https://mdxjs.com/docs/getting-started/

Do you mean that the best I can do

The best way is less to do with technology, and more with what do you want the authoring experience to be.
If you want it to be markdown, use react-markdown and directives.
If you want it to be Markdown and JSX, use MDX.

write my custom remark directive plugin?

The directive parser is already written for you.
It would be an AST plugin, to choose how to translate those directives into tags/content/JSX. (https://unifiedjs.com/learn/ introduces plugins, https://github.com/orgs/remarkjs/discussions?discussions_q=is%3Aopen+directive+react-markdown and remarkjs/react-markdown#564 give examples that others have done)

[remcohaszing]

Note that you can use <MDXProvider /> to define React components that can be used in MDX files without importing them.

I think you can use custom elements in Reac, and react-markdown. But note that custom HTML elements are not the same as React components.

[ChristianMurphy]

Note that you can use to define React components that can be used in MDX files without importing them.

Adding on more, the default exported Component in MDX, supports a components prop much like react-markdown which can pass in custom components without an import.
That is generally preferred over the <Provider /> approach.