Inline component preceded by something other than space

[QuentinRoy]

Is your feature request related to a problem? Please describe.

Currently, I cannot find a way to make something like the following to work:

Use `head` (:spec-link{name=head}) to define metadata about your website.

It seems if an inline component is preceded by anything other than a space, it remains as is. There is a way to make inline components followed by something other than a space (the dummy props trick), but not preceded.

Describe the solution you'd like to see

Ideally, the above code would work as is:

Use `head` (:spec-link{name=head}) to define metadata about your website.

would produce

<p>Use <code>head</code> (<spec-link name="head"></spec-link>) to define metadata about your website.</p>

However, if there is a syntax issue than I'm not seeing, maybe we could introduce a special marker, for example !:

Use `head` (!:spec-link{name=head}) to define metadata about your website.

Describe alternatives you've considered

Adding a space before the component works, but then an extra space is rendered before the element:

Use `head` ( :spec-link{name=head}) to define metadata about your website.

produces:

<p>Use <code>head</code> ( <spec-link name="head"></spec-link>) to define metadata about your website.</p>

Wrapping the component in a span also works, but the extra element is rather unfortunate:

Use `head` ([:spec-link{name=head}]) to define metadata about your website.

produces:

<p>Use <code>head</code> (<span><spec-link name="head"></spec-link></span>) to define metadata about your website.</p>

Currently I'm simply opting out and use inline html, but one has to use allowDangerousHtml in remark-rehype:

Use `head` (<spec-link name="head"></spec-link>) to define metadata about your website.

Minimal reproducible example (using Deno for simplicity)

https://dash.deno.com/playground/early-boar-75

import { unified } from "npm:unified@11.0.4";
import remarkParse from "npm:remark-parse@11.0.0";
import remarkMdc from "npm:remark-mdc@3.2.0";
import remark2rehype from "npm:remark-rehype@11.1.0";
import rehypeStringify from "npm:rehype-stringify@10.0.0";

let mdDoc = `
# MDC test

Use \`head\` (:spec-link{name=head}) to define metadata about your website.

Use \`head\` ( :spec-link{name=head}) to define metadata about your website.

Use \`head\` ([:spec-link{name=head}]) to define metadata about your website.

Use \`head\` (<spec-link name="head"></spec-link>) to define metadata about your website.
`;

let htmlDoc = await unified()
    .use(remarkParse)
    .use(remarkMdc)
    .use(remark2rehype)
    .use(rehypeStringify)
    .process({ value: mdDoc });

Deno.serve((req: Request) => new Response(htmlDoc.toString()));

[Atinux]

Thanks for your feedback @QuentinRoy

I think we could add an exception for some characters, I believe that ( is a good one.

What do you think @farnabaz ?

[QuentinRoy]

Out of curiosity, what's the rational for preventing inline-components when there is a character preceding :? Is it preventing conflicts? I like the exception idea, and this one would certainly fit my need. However note that the issue with exceptions is that there are intrinsically limited to the particular use cases they cover.

[farnabaz]

Currently components are only valid in one of these situations:

• starts after an space/newline ...
• starts as first child of span [:component] [:component]
• starts as first child of italic _:component some other text
• starts as first child of bold *:component* :component

Also ( is another situation we can support 👍

Removing preceding characters validation is also seems good idea. We might have it later 👍