remark-directive with react-markdown 6

[dbuchet]

I used remark-directive for some custom markup with react-markdown@5.x with a custom renderer something as

import directive from 'remark-directive';

<ReactMarkdown
  plugins=[[directive]]
  renderers={{textDirective: ({name, attribues}) => ....}}
/>

But with the switch to v6, and the change to components prop, which use html tags instead of markdown names, my textDirective is (obviously) never triggered.

Is there any way on v6 to have this work again?

Code with v5: https://stackblitz.com/edit/react-9bubwy?file=src/App.js
Code with v6: https://stackblitz.com/edit/react-mymy4i?file=src/App.js

Thanks for your help!

[wooorm]

The example in the readme provides an example: https://github.com/remarkjs/remark-directive#use.
More on how to define in mdast (markdown ast, remark plugins) what the hast (html ast, rehype plugins) looks like can be found in mdast-util-to-hast

[ChristianMurphy]

similar to remarkjs/react-markdown#574

the flow of data is now

                                                           react-markdown
+---------------------------------------------------------------------------------------------------------------------------------------------+
|                                                                                                                                             |
|            +----------+        +----------------+        +---------------+       +----------------+       +--------------+                  |
|            |          |        |                |        |               |       |                |       |              |                  |
| -markdown->+  remark  +-mdast->+ remark plugins +-mdast->+ remark-rehype +-hast->+ rehype plugins +-hast->+  components  +-react elements-> |
|            |          |        |                |        |               |       |                |       |              |                  |
|            +----------+        +----------------+        +---------------+       +----------------+       +--------------+                  |
|                                                                                                                                             |
+---------------------------------------------------------------------------------------------------------------------------------------------+

node.data.hName and node.data.hProperties can be used to pass information through to hast https://github.com/syntax-tree/mdast-util-to-hast#examples
As @wooorm notes, there is an example of how that can look in https://github.com/remarkjs/remark-directive#use

(edited by @wooorm to fix a typo)

[dbuchet]

Thanks for your answers, I was wondering if there was something "as simple" as in v5 :)

I managed to obtain the same behavior, thanks to your resources and explanations!