feat: v-markdown directive

[Tahul]

When trying to inject content into nested slots, we encounter a problem where a named slot declared this way:

            <SectionButton
              to="#"
              size="md"
              class="bg-primary text-gray-800 hover:bg-green-300 focus:bg-green-300"
              aria-label="test"
            >
              <Markdown slot="cta" unwrap="span" />
            </SectionButton>

Will conflict with default slot from SectionButton.

SectionButton will so receive cta slot instead of default one.

This is related to the usage of slot key, which is a reserved word for Vue.

This problem can be resolved by changing the slot props key on the Markdown component to anything else.

This also makes me wonder if we could have a directive (which is an amazing feature from Vue) equivalent to v-html but called v-markdown that would mimic the behaviour of Markdown component by injecting it in default slot for the component.

Here is an example of the possible end result:

<SectionButton
              to="#"
              size="md"
              class="bg-primary text-gray-800 hover:bg-green-300 focus:bg-green-300"
              v-markdown="{ slot: 'cta' }"
/>

In my opinion, this could be easily lightening the size of our templates by a lot, and would be really pleasing to use from a DX perspective.

Note:

We can also solve that slot naming problem using this syntax:

<Markdown :node="$scopedSlots.cta" unwrap="p"/>

Thanks to @farnabaz for all the clarification on this subject. 😄

What do you think @atinux? 😄

[atinux]

I love the idea of using the v-markdown directive, I think we could also name it v-mdc since it will be the name of Docus syntax.

[farnabaz]

As I checked Vue directive API, providing slot for a component using directive seems tricky and may not possible in Vue2 at all.

We could keep <Markdown> component and change its interface, for example

<SectionButton
  to="#"
  size="md"
  class="bg-primary text-gray-800 hover:bg-green-300 focus:bg-green-300"
  aria-label="test"
>
     <Markdown use="cta" unwrap="span" />
     <!-- OR -->
     <Markdown :use="$scopedSlots.cta" unwrap="span" />
 </SectionButton>

Also using directive limits the usage. It will supports only one slot. But <markdown> component allows multiple usage. (of course this is a rare usage)

<SectionButton
  to="#"
  size="md"
  class="bg-primary text-gray-800 hover:bg-green-300 focus:bg-green-300"
  aria-label="test"
>
     <template slot="title"><Markdown use="title" unwrap="span" /></template>
     <template slot="subtitle"><Markdown use="subtitle" unwrap="span" /></template>
 </SectionButton>

[atinux]

I really like <Markdown use="cta" unwrap="span" />

[Tahul]

The use="cta" syntax looks definitely fine to me.

I know for sure that Vue 3 adds new hooks and features to directives, and also an improved support for SSR for them.

Maybe we could reconsider that directive then. 😄