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:[email protected]";
import remarkParse from "npm:[email protected]";
import remarkMdc from "npm:[email protected]";
import remark2rehype from "npm:[email protected]";
import rehypeStringify from "npm:[email protected]";

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()));