Support inline rendering or `unwrap: 'p'` for single-line rendering

[maximepvrt]

Description

Comark lacks a way to force inline rendering or unwrap <p> tags (the MDC unwrap="p" behavior). Currently, I have no option to migrate this use case because autoUnwrap keeps the <p> on single lines in <UButton><Comark :markdown="text" /></UButton>, which breaks button layouts (previously written as <UButton><MDC :value="text" unwrap="p" /></UButton>).

Implementing either an inline prop or an unwrap option could solve this:

<UButton><Comark :markdown="text" inline /></UButton>
<UButton><Comark :markdown="text" :options="{ unwrap: 'p' }" /></UButton>

Motivation

x

Proposed solution

No response

Alternatives considered

No response

Additional context

No response

[c-harding]

How would this work if the markdown contains paragraph breaks (\n\n)?

[maximepvrt]

@c-harding If unwrap is used, it should behave like MDC by removing the <p> tags (which merges paragraphs without spaces if \n\n is present), whereas an inline prop could convert those breaks into <br /> tags instead.

[maximepvrt]

@farnabaz what do you think?

[farnabaz]

@maximepvrt Looks good to me 👍

An important improvement for this usage is to also accept comark-key prop in the component so we can implement cache strategy later. This way Comark will be able to prevent duplicate parsing using cache.

Also comark-key will be consistent with #258

[maximepvrt]

@farnabaz Thanks for your feedback! Which option would work better for you: the inline prop or the unwrap option?

To be honest, I didn't quite understand the connection to the comark-key property, and since I'm not sure I have the skills to implement everything correctly, please feel free to take over!

[Norbiros]

@Barnabas I think #275 only solves part of the problem.

As described in nuxt/nuxt#35210, the end goal would be to produce valid inline HTML such as:

<h1>
  My <span class="color-primary">title</span>
</h1>

With the proposed unwrap option, the <p> wrapper can be removed, but ComarkRenderer still adds <div class="comark-content">. When rendered inside existing <h1>, this still results in invalid or semantically incorrect markup because a block-level <div> is placed inside the heading.

[c-harding]

Is there a use case for unwrap other than creating inline content? If not, inline feels like a much more user-friendly interface.

Inline could then return <span class="comark-content"> instead of a div.