How to place own transformer before gfm autolink transforms text into link?

[fdcds]

I am using react-markdown 6.0.1 and my source code looks like this:

  <ReactMarkdown
    remarkPlugins={[myPlugin, gfm]}
  >
    {source}
  </ReactMarkdown>

myPlugin is right now just this code that I use in order to understand what is happening:

export const attacher = () => {
  return transformer;

  function transformer(tree: any, file: any) {
    console.log(tree);
    visit(tree, '', visitor);

    function visitor(node: any) {
      console.log(node);
    }
  }
};

My Markdown looks like this:

beginning ![image alt](https://image "url" extra) end

myPlugin prints three nodes:

• type: "text", value: "beginning ![image alt]("
• type: "link", url: "https://image"
• type: "text", value: " \"url\" extra) end"

This behaviour is unexpected. I would expect that myPlugin sees the AST before gfm modifies it and does its autolink magic. I.e. I would expect it to see a single type: "text" node with value: "beginning ![image alt](https://image "url" extra) end", because it appears before gfm in the list. If I remove gfm from the list of plugins, I do get what I would expect: A single node instead of three -- so the "link" appears indeed to be created by gfm.

The fact that gfm does the autolink replacement before myPlugin gets a chance to look at the AST seems to make my plugin's intended job significantly harder: If it would see a single node, I understand that I could easily use mdast-util-find-and-replace to turn this into a customised image node. With the three nodes, I would have to add more logic.

My questions:

• What am I missing about how plugins work? I.e. why does gfm not work as and when I would expect it to?
• Is it possible to have my plugin be called before the gfm plugin gets to transform the AST?
• If that is not possible, is there a robust and convenient way to turn ![image alt](https://image "url" extra) into a customised image node, that is generic for a single "text" node and the "link" node, and that does not break when the "link" node was not created by gfm as an autolink?

[ChristianMurphy]

My Markdown looks like this:

beginning ![image alt](https://image "url" extra) end

this isn' a valid markdown image, there is no content after title in markdown links or images.

What am I missing about how plugins work?

Parsing happens first thing, and as a single step.
Stringifying happens last and also as a signle step.
Parsing and stringifying plugins, like remark-gfm, add functionality to the step, but don't add new steps.

Is it possible to have my plugin be called before the gfm plugin gets to transform the AST?

no, see the above on how parser plugins work.

If that is not possible, is there a robust [... add] a customised image node?

You could write a custom parser for your custom image type.
Though in general I wouldn't recommend it directives and mdx are more standard approaches for new content types.

If that is not possible, is there a robust and convenient [...add] a customised image node

In general if you want to adding custom content, I'd recommend using directives https://github.com/remarkjs/remark-directive
Which are semi-standard, convenient, and robust.
in your case it could look something like:

::image[alt text]{href=https://image title=example customAttr=something}