JSDoc/TSDoc @link with custom display text incorrectly shows vertical bar

[SchoofsKelvin]

Bug Report

🔎 Search Terms

jsdoc, tsdoc, link, display text, vertical bar, ...

🕗 Version & Regression Information

• Reproduced this successfully in VS Code with TypeScript v4.3.5, v4.4.4 and v4.5.4
• Not reproducible within the TypeScript Playground as it doesn't pretty-format {@link ...} tags

💻 Code and reproduction steps

Open VS Code, open an empty (or existing) file with "TypeScript" as language and insert the following code:

const A = 123;

/**
 * See {@link A | constant A} instead
 */
const B = 456;

Then hover over B to display the parsed documentation of that symbol.

🙁 Actual behavior

Hovering over B displays the vertical bar (|) in the link text:

🙂 Expected behavior

Hovering over B should only display the text after the vertical bar:

ℹ Extra information

Originally reported in #46734 but told to make a separate issue for it.

According to the TSDoc specification and its dependant API Extractor (where I stumbled upon this issue), if we want the display text to be different from the reference, we need to use {@link DECLARATION_REFERENCE | DISPLAY_TEXT}. But doing it this way results in the vertical bar being displayed in the link's display text.

While removing the vertical bar does make it display the correct text in the tooltip, this goes against the above documentation, their example code and even the official tsdoc library, as the latter will output (in my case) a tsdoc-reference-missing-dot warning, since it thinks it's still parsing a declaration reference due to not encountering a vertical bar.

While "testing" the above code in the Playground doesn't reproduce this issue (as it just renders {@link A| constant A} instead of link-ifying it), turning on the WIP AST Viewer under Settings (or use the one under Export if you change the Tree mode) shows that the JSDocLink has | constant A as text, which might already be wrong there if the trimming is supposed to happen earlier.

It's worth mentioning that JSDoc does allow omitting the vertical bar, but it also supports having the vertical bar. Their examples showcase that if a vertical bar is used, it isn't displayed, similar to how TSDoc handles the vertical bar.

As far as I know this is a TypeScript issue, since the intellisense in VS Code should be provided by the TS language server and not VS Code itself? Perhaps I'm wrong about that.