custom syntax and custom components are not working

[fengliner]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

react-markdown@9.0.1

Link to runnable example

No response

Steps to reproduce

I want to add a custom syntax, which is warped by :::tip::: and :::/tip:::，will render by my custom component. But, it is not working. My demo code is blow

function customInfoPlugin() {
  return (tree) => {
    let tipOpen = false;
    let tipNode = null;

    visit(tree, 'text', (node) => {
      const value = node.value.trim();
      if (value === ':::tip:::') {
        if (!tipOpen) {
          tipOpen = true;
          tipNode = { type: 'tip', children: [], value: '' };
          node.value = ''; // Clear the opening tag
        } else {
          throw new Error('Nested tips are not allowed.');
        }
      } else if (value === ':::/tip:::') {
        if (tipOpen) {
          tipOpen = false;
          node.value = ''; // Clear the closing tag
          tree.children[0].children.splice(tree.children.indexOf(node.parent), 1, tipNode);
        } else {
          throw new Error('Closing tip without opening.');
        }
      } else if (tipOpen) {
        tipNode.value = value;
      }
    });
  };
}

<ReactMarkdown
      remarkPlugins={[RemarkBreaks as () => undefined, customInfoPlugin]}
      components={
        {
          tip: (infoProps) => {
            return <div>=====test=====</div>;
          },
        } as any
      }
    >
      {`:::tip:::       
      This is a custom tip!
      :::/tip:::`}
    </ReactMarkdown>

Expected behavior

The content warped by :::tip::: and :::/tip::: will render by tip component.

Actual behavior

It was rendered as text.

Runtime

No response

Package manager

No response

OS

No response

Build and bundle tools

No response

[ChristianMurphy]

Welcome @fengliner! 👋
The markdown doesn't have a tip node type, so it doesn't know what to do with your custom node and skips it.
I think you are looking for data hName and hProperties which influence the HTML output/components.

https://github.com/syntax-tree/mdast-util-to-hast?tab=readme-ov-file#fields-on-nodes

[wooorm]

It looks like you are trying to make your own version of https://github.com/remarkjs/remark-directive. Perhaps you can use that instead btw!