Auto complete of props in MDC

[atinux]

It would be great to have the possibility to support the autocompletion of props in the editor.

[atinux]

I guess we could leverage something similar to what @Tahul has done in Pinceau: https://github.com/Tahul/pinceau/blob/main/volar/index.js

By using nuxt-component-meta under the hood?

[mrwwalmsley]

I was wanting to implement autocomplete for my React project at work.
I was planning to have auto complete of props as well as directive names by reading the filenames of MDC directive components.

Would it be possible to have a configuration file that can specify all the props available for each directive so that this could work in a React as well as Vue project?

[atinux]

Did you make the MDC works with React @mrwwalmsley ?

[mrwwalmsley]

Yes, we have been using MDC in a React project for a couple of years -- we extended Remark's MDC implementation.

We had own custom editor & syntax highlighting that was not as good as the Nuxt3 syntax highlighter. When Nuxt3 added MDC I started upgrading my Nuxt side projects from Nuxt2 to Nuxt3 using MDC. After that we started testing the Nuxt plugin for writing our React content in VsCode.

Our MDC implementation has a bunch of custom extensions such as include and define statements:

:::define[template_name]
Hello {{name}}!
:::

:::include[template_name]
name='Mike'
:::

:::include[template_name]
name='Sebastian'
:::

If the includes are not defined locally, then they are loaded from our content DB.

[mrwwalmsley]

I've been using this extension for a Nuxt website I have been rebuilding from Options+Nuxt2 to Composition+Nuxt3. It would be amazing to get autocomplete and syntax highlighting for attributes as well as slot names:

And ideally would give a red squiggly underline for slots or attributes that don't exist.
This would make it much easier for content writers.

How hard to do this? Anything I can do to help?

[adamdehaven]

@atinux I have suggestions working for MDC block components in my project (I fetch the component data from a Nitro endpoint in my app). I'm planning to add support for suggesting & validating props, but haven't gotten there yet.

I'm not sure where to source the component data from for this repo, but I can contribute the rest of the logic if someone wants to assist

[atinux]

I think @farnabaz would be the best to help on this, I guess we shall somehow leverage nuxt-component-meta for it 🤔