Is there a way to create and apply new rules for rendering

[lmcjt37]

If I create a markdown-it instance from the library const markdownItInstance = MarkdownIt({typographer: true}); and add my own plugin using: markdownItInstance.use(ButtonPlugin);

Where I am creating new rules as below:

md.inline.ruler.before('text', 'button', parseInlineButton, options);

md.block.ruler.before('paragraph', 'button', parseBlockButton, options);

md.renderer.rules.button_open = function () {
  console.log('RULEZ BUTTON OPEN');
  return null;
};
md.renderer.rules.button_close = function () {
  console.log('RULEZ BUTTON CLOSE');
  return null;
};

(I would either return button components here or add to rules for markdown component)

Then if I parse out my markdown body const parsed = markdownItInstance.parse(body, {}); I can see the nodes being created when printed to the console. So I then pass this instance in...

<Markdown markdownit={markdownInstance} rules={rules}>
  {body}
</Markdown>

But it doesn't appear that the renderer rules are being applied for my new token as I never see those logs, and I'm not actually able to render a desirable component, any suggestions where I may be going wrong?

[lmcjt37]

Closing, think I found a solution to this by reviewing the token properties and updating my plugin. There was also a conflict between the pre-processed AST and passing the instance into the <Markdown /> component.