Why content is not being parsed and why the processImage function is never being call?

[reypm]

I need to process custom shortcodes (this is not the only one, there are a few more whose syntax is completely different) coming as a string for example:

# This is some Markdown!\n\nHi! I'm your first Markdown file in **StackEdit**. If you want to learn about StackEdit, you can read me.\nAnd this is a custom image shortcode ::image{id=\"/path/to/image.png\" alt=\"some alt\" title=\"some title\"}::

For such a task, I am using the react-markdown component and some custom code that I am working on.

This is how I am setting up the ReactMarkdown component:

import React from 'react';
import './App.css';
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import remarkDirective from "remark-directive";
import remarkFrontmatter from "remark-frontmatter";
import remarkBreaks from "remark-breaks";
import remarkUnwrapImages from "remark-unwrap-images";
import rehypeSlug from "rehype-slug";
import rehypeExternalLinks from "rehype-external-links";
import shortcodePlugin from "./customPlugins/ShortcodePlugin";

function App() {

    const str = '# This is some Markdown!\\n\\nHi! I\'m your first Markdown file in **StackEdit**. If you want to learn about StackEdit, you can read me. And this is a\n custom image shortcode ::image{id="https://dummyimage.com/600x400/000/fff" alt="some alt" title="some title"}::\n# another title\n ::image{id="https://dummyimage.com/600x400/000/fff" alt="some alt" title="some title"}::';

    return (
        <div className="App">
            <ReactMarkdown
                remarkPlugins={[
                    remarkGfm,
                    remarkDirective,
                    [remarkFrontmatter, ['yaml', 'toml']],
                    remarkBreaks,
                    remarkUnwrapImages,
                    shortcodePlugin
                ]}
                rehypePlugins={[
                    rehypeSlug,
                    rehypeExternalLinks
                ]}
            >
                {str}
            </ReactMarkdown>
        </div>
    );
}

export default App;

Here is the ShortcodePlugin.tsx content:

import {visit} from "unist-util-visit";
import processImage from "./Shortcodes/Image";

function shortcodePlugin() {
    return (tree: any) => {
        visit(tree, (node: any) => {
            switch (node.name) {
                case 'image':
                    processImage(node);
                    break;
            }
        });
    }
}

export default shortcodePlugin;

and the processImage function definition:

const processImage = (node: any) => {
    const data = node.data || (node.data = {});
    data.hProperties = node.attributes;

    node.type = 'containerDirective';

    const img = {
        type: 'image',
        url: node.attributes.id
    }

    node.children.push(img)

    console.log(node)
}

export default processImage;

From the above, I would expect two things:

• the string str gets parsed as markdown and render accordingly
• the processImage gets called and prints out something to the console

but none of those are happening and I am not sure what I am missing because I have read the docs several times. This is basically what I am getting back.

Can I get some help? What I am missing?

PS: I will try to set up a working example later today

[wooorm]

Hi!

custom shortcodes

What are shortcodes? Do you mean directives?

there are a few more whose syntax is completely different

How do you mean, “different”?

any

If you use TS, it’s probably a good idea to use types, instead of any everywhere.
Using types will help you catch bugs.

but none of those are happening and I am not sure what I am missing because I have read the docs several times. This is basically what I am getting back.

::x are leaf directives. They are blocks. Like a heading. Have you tried putting a heading in a markdown paragraph? It doesn’t work: asd # heading? No!. Instead, you put them on their own line:

asd

# heading?

Yes!

The same with two-colon, leaf, directives:

asd

::image

qwe

If you want to use text directives, use a single colon: asd :image yes!.
If you do want a text directive, and want to make the colon before it visible, use an escape: asd \::image yes!.
For more information on how the syntax works, see the Syntax section in the extension: https://github.com/micromark/micromark-extension-directive/tree/main#syntax

[reypm]

Hello sir and thanks for your reply! 🚀

What are shortcodes? Do you mean directives?

yes, we call them internal shortcodes 🥲

How do you mean, “different”?

Forget about the word "different" they all share the same structure basically, ie:

:::notice{info}
this is a notice
:::

:::::magic-link{id="some-url" openin="newtab"}
this is a magic link
:::::

any
If you use TS, it’s probably a good idea to use types, instead of any everywhere. Using types will help you catch bugs.

Yes, we use Typescript however it has been hard for me to find out the types for tree and nodes which are the only any I have on the snippet code I show here.

::x are leaf directives. They are blocks. Like a heading. Have you tried putting a heading in a markdown paragraph? It doesn’t work: asd # heading? No!. Instead, you put them on their own line:
If you want to use text directives, use a single colon: asd :image yes!.
If you do want a text directive, and want to make the colon before it visible, use an escape: asd ::image yes!.

what do you mean make the : before it visible? Make it part of the previous text.?

Micromark allows nested directives and that's why I have 2 colons in front of the directive, probably it does not work like that or it has to be more than 2:

Containers can be nested by using more colons outside:

::::spoiler
He dies.
:::spoiler
She is born.
:::
::::

Having said that, did you spot anything else wrong in my code besides the MD string not being properly formatted?

[wooorm]

Yes, we use Typescript however it has been hard for me to find out the types for tree and nodes which are the only any I have on the snippet code I show here.

Please see the existing plugins for how to type plugins.

what do you mean make the : before it visible? Make it part of the previous text.?

Do you want to show that extra : or not?
I mean “visible” in showing it. To users.

Micromark allows nested directives and that's why I have 2 colons in front of the directive, probably it does not work like that or it has to be more than 2:

It does for containers, indeed. Text and leaf directives don’t work like that.

Having said that, did you spot anything else wrong in my code besides the MD string not being properly formatted?

No. Have you changed the input markdown though?

[reypm]

Please see the existing plugins for how to type plugins.

Got it! I will check on those!

Do you want to show that extra : or not? I mean “visible” in showing it. To users.

No, in this case, the two colons (::) belong to the directive but now I know that when I need to show the colon I need to escape it before

It does for containers, indeed. Text and leaf directives don’t work like that.

I will assume there are differences between these three, where can I read about them? 🤔 trying to understand when I should use or the other

No. Have you changed the input markdown though?

Yes, and it worked! 🕺🏻

[wooorm]

Yes, and it worked! 🕺🏻

Great!

I will assume there are differences between these three, where can I read about them? 🤔 trying to understand when I should use or the other

I think the readme explains it well? What are you missing? https://github.com/micromark/micromark-extension-directive/tree/main#syntax

[reypm]

Oh, did not spot that, thank you again!

[reypm]

hey @wooorm I have this edge case where the id attribute is coming with spaces. See this example:

:::image{id="/dummyimage.com/600x400/000/fff xxx yyy.png" alt="some alt" title="some title"}
:::

(which to be honest I am not sure is a valid markdown)

and this is the code processing such directive:

const processImage = (node: any) => {
    const data = node.data || (node.data = {});
    data.hProperties = node.attributes;

    const imgPath = node.attributes.id;
    console.log('imgPath', imgPath);

    const img = {
        type: 'image',
        url: imgPath,
        alt: node.attributes.alt
    }

    node.children.push(img)
}

export default processImage;

however imgPath will only contain /dummyimage.com/600x400/000/fff which of course will never display the image because it will not exist. Is there a workaround to get the entire id?

Thanks in advance

[ChristianMurphy]

@reypm doing a quick test of the parser, the id appears to come through as a single string as expected.
https://astexplorer.net/#/gist/54b2918ad7fd56ff48ff4c352ac69638/14911c62ec9fe9a8f1819765ac4392bd439804ac

You may want to check the versions of dependencies you are using, and if you had/have edited the AST node for the directive before the step you show above.

[reypm]

Thanks, @ChristianMurphy bookmarking this tool. Found where the issue is on my end, the id lacks double quotes. If you remove them from your example you will see how xxx and yyy are parsed as attributes and not part of the entire string.