getting the "component props" in markdown

[Elon-Mask12]

so i have this use case in my app where i wanna check if the content has a particular property (say startsWith "!!!note") - if yes, return a callout kinda component with the rest of the content.

so on creating the custom component, i get the props item, im able to convert the whole thing to text, but that loses all the links in it.
Is there anyway i can get the markdown data from the props object?

Thanks : )

[ChristianMurphy]

Welcome @Elon-Mask12! 👋

It sounds like you are looking for https://github.com/remarkjs/remark-directive
the syntax is:

:::note{attribute=value}
inner content
:::

and yes it can have attributes and inner content.

[ChristianMurphy]

You are asking for help from volunteers.
Spending time helping you when you have no clue what you even want to do.
No need to be rude.

Be polite or get banned.

---

This is an XY Problem.
You keep on asking about your proposed solution which isn't working instead of sharing the problem you are actually trying to solve.

You can access the markdown structure from a remark plugin as noted in my earlier reply https://github.com/remarkjs/react-markdown#architecture

If you can articulate what you want to do, and do so in a polite way, I'm happy to help more.

[Elon-Mask12]

my bad, sorrry about that.
you guys deserve respect, and it was totally wrong by me.

so i wanna check if the h1 element has the following property:

1. starts with "starred", if yes replace the word with "recommended:" else, replace it with "basic:"
2. has a link with the domain "microsoft"
3. the number of words is a multiple of 3

based on each case i'd like to return a different component or text in the HeadingRenderer function

export const HeadingRenderer = (props: any) => {
 return <h1>
  //return based on the conditions mentioned above
   </h1>
}

[ChristianMurphy]

Again remark plugins are your friends, it allows you to inspect and work with the markdown document in an abstracted way, which allows you to better handle edge cases (there are a lot of possible edge cases in your three examples) https://unifiedjs.com/learn/

An example of your second goal "has a link with the domain "microsoft", runnable sandbox: https://stackblitz.com/edit/github-dbm27w?file=src%2Fapp.tsx

source from sandbox

import type { Root } from 'mdast';
import Markdown from 'react-markdown';
import { visit } from 'unist-util-visit';

const markdownSource = `
# heading [microsoft link](https://microsoft.com)

# heading [google link](https://google.com)
`;

function remarkHeadingLinkPlugin() {
  return function (tree: Root) {
    // visit all the headings in the markdown document
    visit(tree, 'heading', (headingNode) => {
      let hasMicrosoftLink = false;

      // scan the contents for links
      visit(headingNode, 'link', (linkNode) => {
        const linkReference = new URL(linkNode.url);
        // match the hostname of the link
        if (linkReference.hostname === 'microsoft.com') {
          hasMicrosoftLink = true;
        }
      });

      if (hasMicrosoftLink) {
        // if no data prop exists, add it
        if (!headingNode.data) headingNode.data = {};
        // add new html property to track details
        headingNode.data.hProperties = {
          ...headingNode.data.hProperties,
          'data-has-microsoft-link': 'true',
        };
      }
    });
  };
}

function App() {
  return (
    <Markdown
      remarkPlugins={[remarkHeadingLinkPlugin]}
      components={{
        h1: ({ children, ...props }) => (
          <h1>
            {
              // do something with the attribute added in the remark plugin
              // @ts-expect-error data props are not typed
              props['data-has-microsoft-link']
                ? 'this is a microsoft heading:'
                : 'this is not a microsoft heading:'
            }{' '}
            {children}
          </h1>
        ),
      }}
    >
      {markdownSource}
    </Markdown>
  );
}

starts with "starred", if yes replace the word with "recommended:" else, replace it with "basic:"
the number of words is a multiple of 3

These two are tricky depending on what you define as "words".
Link labels and image labels can contain text but do you consider those "words"?
How do emoji, non-Latin characters, and contractions get counted or ignored as part of these?

https://github.com/syntax-tree/mdast-util-to-string and https://github.com/remarkjs/remark-retext will probably help towards this goal, but the definition of "words" will still be up to you and your stakeholders.

[Elon-Mask12]

Sorry about the late reply been a bit busy lately.
I did a bit of searching using the links you shared, and thanks a ton i managed to find something.
Incase anyones interested:

import { toMdast } from "hast-util-to-mdast";
import { toMarkdown } from "mdast-util-to-markdown";

const getMarkdownFromProps = (props: any) => {
  const mdast = toMdast(props.node);
  const md = toMarkdown(mdast);
  return md;
};