Missing props in code after upgrading to recent version

[codegino]

Hi all. Can I get some help on why this is happening? Thanks!

Given this component that will map to a multiline code(created using ``` OR triple backticks)

const CodeBlock = ({children, className, ...props}) => {
  console.log(props);
}

On 3.0.8, the markup below

```jsx prop1=value1 prop2=value2 // content does not matter ```

will log {props1: "value1", props2: "value2"}

However, after migrating to 4.0.3, I could not access those properties anymore.

it will log, {}

I'm not using any other mdx package aside from next-mdx-remote.

If I haven't provided enough context, please let me know. Thanks!

P.S. I already spent some time looking at mdx2 breaking change, but could not find anything related.

[BRKalow]

This might help: https://mdxjs.com/guides/syntax-highlighting/#syntax-highlighting-with-the-meta-field

[payapula]

@codegino I too faced the same issue after upgrading to v4.1.0

I had written code blocks like the below, which would highlight line numbers 2 and 3.

```javascript {2,3}
const counterElement = {
  type: 'div',
}```

After upgrading to v4.1.0, the metaString prop is no longer available from MDX. So, I followed the workaround mentioned by @BRKalow as below:

Used remark-mdx-code-meta and added it to mdxOptions of serialize function

import remarkMdxCodeMeta from 'remark-mdx-code-meta';

 const mdxSource = await serialize(post.content, {
      mdxOptions: {
          remarkPlugins: [remarkMdxCodeMeta]
      }
});

Then I was able to access the meta fields. To make it work, I had to refactor my code to have react like props highlight={[2,3]}, instead of plain object {2,3}

```javascript highlight={[2,3]}
const counterElement = {
  type: 'div',
}```

If you want to look at it, the upgrade work is in progress here - https://github.com/payapula/blog/pull/52.

I hope it helps :)