Markdown with Vue components in list item does not render link about unplugin-vue-markdown HOT 11 CLOSED

@manniL

The behavior of block tags would be better in a more common case - write component in multi-line:

<Foo
  class="foobar"
  title="baz"
/>

Check the differences here.

You'll notice that the inline one is wrapped with a <p> tag, which might not be expected for Vue components.

In fact, they are almost the same in most cases. What you reported is one of the edge cases that the behaviors differ. If the tag is not at the beginning of the list item, everything will work as expected:

* <div/> [Example link](https://github.com/)
* foobar<div/> [Example link](https://github.com/)

The reason is that a html block at the beginning of a line somehow "terminates" the parsing of the entire line.

It looks weird indeed, but markdown-it says it is a 100%-done-right CommonMark parser, so 😑

from unplugin-vue-markdown.

There could be a solution for that, but in fact I'm also not an expert of the markdown-it parsing flow so I didn't solve it yet 😢 .

from unplugin-vue-markdown.

@manniL Good news, I think I made it at least for this case 😃

from unplugin-vue-markdown.

/cc @meteorlxy 👀

from unplugin-vue-markdown.

Well... I'd say this is kind of as expected, because we are treating vue components as html block tags, instead of inline tags. That's say this plugin is stricter than vite-plugin-md.

See the differences between inline tags and block tags:

http://markdown-it.github.io/#md3=%7B%22source%22%3A%22%2A%20%3Cdiv%20%2F%3E%20%5BTest%20Link%5D%28https%3A%2F%2Fgithub.com%2F%29%5Cn%2A%20%3Cspan%20%2F%3E%20%5BTest%20Link%5D%28https%3A%2F%2Fgithub.com%2F%29%22%2C%22defaults%22%3A%7B%22html%22%3Atrue%2C%22xhtmlOut%22%3Afalse%2C%22breaks%22%3Afalse%2C%22langPrefix%22%3A%22language-%22%2C%22linkify%22%3Atrue%2C%22typographer%22%3Atrue%2C%22_highlight%22%3Atrue%2C%22_strict%22%3Afalse%2C%22_view%22%3A%22src%22%7D%7D

from unplugin-vue-markdown.

Maybe we could expose an API to allow users customizing which components should be treated as inline 🤔 ?

from unplugin-vue-markdown.

This option should help with your case:

componentOptions: {
  inlineTags: ['mdi-github'],
}

from unplugin-vue-markdown.

Well... I'd say this is kind of as expected, because we are treating vue components as html block tags, instead of inline tags. That's say this plugin is stricter than vite-plugin-md.

Interesting insight, thanks! Could you briefly highlight why Vue components are treated as block tags and not as inline tags "anymore" (compared to vite-plugin-md)?

This option should help with your case:

componentOptions: {
  inlineTags: ['mdi-github'],
}

Thanks for providing a quick workaround for that issue 👍🏻
Do you think it'd be reasonable to have a flag that automatically treats all components as inline tags? So compat with vite-plugin-md is better (e.g. some of my slides are broken because of the switch in Slidev itself so a flag which could be set in Slidev might mitigate this issue)

from unplugin-vue-markdown.

Thanks for the detailed answer!

Would it make sense to differ between multi-line Vue components (block-level by default) and "inline" Vue components (inline-level by default) then? Sadly I'm not aware of the internals and if that's possible but this would kill two birds with one stone: No superfluous (or possibly even bug-introducing) <p> tag around multi-line components and compat behavior (for most cases).

from unplugin-vue-markdown.

I think the behavior is acceptable and only slightly violates the CommonMark spec.

Component tags would behave differently from block & inline tags:

block tags

Terminate the line:

<!-- input -->
<div /> [link](link)

<!-- output -->
<div /> [link](link)

inline tags

As normal inline content being wrapped with <p>:

<!-- input -->
<span /> [link](link)

<!-- output -->
<p><span /> <a href="link">link</a></p>

component tags (unknown tags)

Won't terminate the line and won't be wrapped with <p>:

<!-- input -->
<Counter /> [link](link)

<!-- output -->
<Counter /> <a href="link">link</a>

from unplugin-vue-markdown.

That looks pretty good 👍🏻
I also like the distinct differentiation between inline, block and component tags.

from unplugin-vue-markdown.