How to define my own plugin to render a button with markdown?

[rockcs1992]

Hi,

I'm new to the remark community so please forgive my lack of knowledge in this area if I asked anything that stupid.

In my project I'm using react-markdown package, to render a markdown snippet as a React component on the frontend. It works well for me until we have a need recently to render a button from a markdown. I know this not standard markdown syntax, so I'm trying to define my own custom syntax for a button and try creating my own plugin to parse it.

I started with a rudimentary syntax like this:

and tried the following:

import { visit } from "unist-util-visit";

const remarkButton = () => {
    return (tree) => {
        visit(tree, "text", (node: any, index, parent) => {
            const regex = /\[!\[([^\]]+)\]\]\(([^)]+)\)/g;
            const matches = [...node.value.matchAll(regex)];

            if (matches.length > 0 && parent && Array.isArray(parent.children)) {
                const newNodes = matches.map((match) => ({
                    type: "jsx",
                    value: `<MarkdownButton text="${match[1]}" href="${match[2]}" />`,
                }));

                parent.children.splice(index, 1, ...newNodes);
            }
        });
    };
};

export default remarkButton;

and then in my render function:

import Button from "<my-component-library>";
...
return (
<ReactMarkdown
                children={text}
                remarkPlugins={[remarkButton]}
                allowedElements={reactMarkdownAllowedElements}
                unwrapDisallowed={true}
                components={{
                    MarkdownButton: ({ text, href, className }) => (
                        <Button href={href} className={className}>
                            {text}
                        </Button>
                    ),
                }}
            />
)

Apparently this does not work, and it simply returns a link with text "![buttonText]" like this ![buttonText]
My questions are:

1. Are there any existing plugins that allows me to do what I described above?
2. If not, are there any good examples that I could refer to for my use case?

Thanks!

[ChristianMurphy]

Welcome @rockcs1992! 👋
I'd recommend reading https://github.com/micromark/micromark?tab=readme-ov-file#extending-markdown
Rather than creating a new flavor of markdown, consider leveraging a generic extension like directive https://github.com/remarkjs/remark-directive#readme along with a plugin like https://github.com/IGassmann/remark-directive-rehype

::button[button label to show the user]{href=https://example.com}

would be the syntax.

[rockcs1992]

Hi @ChristianMurphy ,

Awesome this is exactly what I was looking for. I will take a look at the plugin you mentioned. Thanks!