Allow-only / exclude specific components

[MickL]

Using the <Comark> component (and possibly others) it would be handy to have props that allow-only or exclude components.

For example, one may only render p, ul/ol and strong.

[atinux]

So what would be the fallback for components not allowed @MickL?

[MickL]

Just dont change them, e.g. if strong is excluded keep **text**. This is especially important since Comark allows to use components in markdown.

Also a prop to just disallow custom-components, eg:: callout would be great!

Feature request on (deprecated) MDC: nuxt-content/mdc#414

[atinux]

Would the security plugin with blockedTags work in this case for you @MickL to remove ::callout if not specified?

https://comark.dev/plugins/built-in/security#options-code-blockedtags

[atinux]

I think could you start by making a plugin to showcase what you have in mind, also happy to list it in community plugins

[MickL]

I think it would not work out since every single component needs to be supplied.

Unfortunately I dont have the time (and the Vercel sponsorship) to work on this project.

[atinux]

I think it would not work out since every single component needs to be supplied.

But so far if you don't give components in the components props, it won't try to render the components 🤔

[MickL]

In this regard, forgot what I said about components. This issue is only about restricting render of html tags. E.g. imagine a comment system like here on Github, users can add markdown but it should not render a h1:

# This should be normal text with, # stays
**This should be bold**

[farnabaz]

@MickL No markdown renderer do what are you looking for, but due to Comark's design you can achieve this by implementing custom components-manifest for Comark component. Here is an example:

• App.vue

<script setup lang="ts">
import { Comark } from '@comark/vue'

async function componentsResolver(_tag: string) {
  // Check here is create your custom components
  // Allow what you want / render how you want
  // Fallback to empty component if you want to hide it
  return import('./components/TextOnly.vue').then(m => m.default)
}
</script>

<template>
  <Suspense>
    <Comark :components-manifest="componentsResolver" ... />
  </Suspense>
</template>

• TextOnly.vue

<template>
  <span><slot /></span>
</template>

If you run this example, you will only see text contents. Then implement components as your prefer.
Allowing/Excluding specific components are only possible via what @atinux suggested before, or in runtime via components and componentsManifest.

[MickL]

No markdown renderer do what are you looking for

Isnt this one more reason for implementing it? The issue over MDC had a lot of upvotes.

Another option would be to parse the markdown string and remove unwanted signs but this could result in removal of signs like # or ** that were actually meant as text.

[atinux]

Isnt this one more reason for implementing it? The issue over MDC had a lot of upvotes.

You mean one upvote (and yours)?

Try the workaround by @farnabaz and see if it works for your use case please before pushing for a feature request within the core 🙏