Inline styling directive error

rderimay commented 1 year ago

Using a styling directive on an image in .mdxfiles like this:

![My fantastic hero image](./hero.jpg):style{.eager}

leads to the following error:

Cannot read properties of undefined (reading 'end')

The block styling directives are working fine, so I think my configuration (styleDirectives: true, etc) is ok. It may be related to the use of inline styling on an image, but this works pretty well on .md files.

I am on the last astro version with fully up to date packages with the following astro conf:

const m2dxOptions = {
    styleDirectives: true,
};

[...]

    markdown: {
        remarkPlugins: [
            remarkDirective,
            [m2dx, m2dxOptions],
        ],
        extendDefaultPlugins: true,
    },

Stack trace:

...
at styleDirectives (file:///Users/.../node_modules/.pnpm/astro-m2dx@0.7.15/node_modules/astro-m2dx/dist/index.js:788:3)
at transformer (file:///Users/.../node_modules/.pnpm/astro-m2dx@0.7.15/node_modules/astro-m2dx/dist/index.js:974:7)

Hope you can help!

christian-hackyourshack commented 1 year ago

I will look into it tomorrow.

rderimay commented 1 year ago

@christian-hackyourshack Many thanks!

christian-hackyourshack commented 1 year ago

Do you have a link to a repo or sandbox (e.g. Stackblitz) to reproduce the issue? That would help lots. Thanks.

rderimay commented 1 year ago

I don't have one handy now. The error was -at least in my configuration- reproducible with just the one liner above and a simple layout. I will try to strip down my project to the minimum tomorrow to help reproduce. Thanks for the quick communication. I really appreciate it.

rderimay commented 1 year ago

Hello!

The test project is available there: https://www.swisstransfer.com/d/2ff4811b-2406-4bcc-8fd8-cd32c4988cf4

Just go to /blog after install and run dev. You should find 2 content entries, one is working, (without :style{...}) and the other one, identical but with 2 x :style{...} not working :-)

Thanks!

rderimay commented 1 year ago

@christian-hackyourshack Hi Christian. Could you make anything from my project, or do you need something else ?

christian-hackyourshack commented 1 year ago

Hi @rderimay,

sorry for the long delay. I haven't been working on my astro project in a while and haven't found the time to look into this in the meantime. Now I cannot download your example anymore, but I am sure, you found a way around.

For a new astro project I am setting up, I am preparing for Astro 2 and upcoming Astro 3. For this, I am splitting up astro-m2dx into individual extensions that are as independent of astro as possible. The styling directive is completely independent of astro and available as remark plugin here:

https://www.npmjs.com/package/remark-class-directive

I tried the inline variant on an image and it works without any problems. I would be happy if you like to try it out...

Cheers and happy hacking, Christian

christian-hackyourshack / npm

Inline styling directive error #67