📐 Replace xref text when using angle brackets (#1183)

Co-authored-by: Rowan Cockett <rowanc1@gmail.com>

.changeset/purple-spoons-visit.md

@@ -0,0 +1,5 @@
+---
+'myst-transforms': patch
+---
+
+Replace xref text when using angle brackets

packages/myst-transforms/src/links/myst.ts

@@ -105,6 +105,14 @@ export class MystTransformer implements LinkTransformer {
       );
       return false;
     }
+    // If text is the same as raw xref, remove it and allow text to fill in later.
+    if (
+      link.children?.length === 1 &&
+      link.children[0].type === 'text' &&
+      link.children[0].value === link.urlSource
+    ) {
+      link.children = [];
+    }
     link.internal = false;
     link.url = `${mystXRefs.url}${match.url}`;
     link.dataUrl = `${mystXRefs.url}${match.data}`;

packages/myst-transforms/src/links/plugin.spec.ts

@@ -0,0 +1,48 @@
+import { describe, expect, test } from 'vitest';
+import { VFile } from 'vfile';
+import type { Link, ResolvedExternalReference } from './types';
+import { MystTransformer } from './myst';
+import { linksTransform } from './plugin';
+
+export const TEST_REFERENCES: ResolvedExternalReference[] = [
+  {
+    key: 'myst-ref',
+    url: 'https://example.com/myst-ref',
+    kind: 'myst',
+    value: {
+      version: '1',
+      myst: '1.2.0',
+      references: [
+        {
+          identifier: 'explicit-figure',
+          kind: 'figure',
+          data: '/my-figure.json',
+          url: '/my-figure',
+        },
+      ],
+    },
+  },
+];
+
+describe('Link Plugin Transformer', () => {
+  test('link text is matched', async () => {
+    const file = new VFile();
+    const t = new MystTransformer(TEST_REFERENCES);
+
+    const link: Link = {
+      type: 'link',
+      url: `xref:myst-ref#explicit-figure`,
+      children: [{ type: 'text', value: 'xref:myst-ref#explicit-figure' }],
+    };
+    linksTransform({ type: 'root', children: [link] }, file, { transformers: [t] });
+    expect(file.messages.length).toEqual(0);
+    expect(link.internal).toBe(false);
+    expect(link.url).toEqual('https://example.com/myst-ref/my-figure');
+    expect(link.dataUrl).toEqual('https://example.com/myst-ref/my-figure.json');
+    expect(link.type).toEqual('crossReference');
+    expect((link as any).remote).toBe(true);
+    expect((link as any).identifier).toEqual('explicit-figure');
+    expect((link as any).label).toEqual('explicit-figure');
+    expect(link.children).toEqual([]);
+  });
+});

packages/myst-transforms/src/links/plugin.ts

@@ -40,11 +40,13 @@ function formatLinkText(link: Link) {
 export function linksTransform(mdast: GenericParent, file: VFile, opts: Options): void {
   const linkNodes = selectAll(opts.selector ?? 'link,card', mdast) as Link[];
   linkNodes.forEach((link) => {
-    formatLinkText(link);
     if (!link.urlSource) link.urlSource = link.url;
     const transform = opts.transformers.find((t) => t.test(link.urlSource));
-    if (!transform) return;
-    const result = transform.transform(link, file);
+    const result = transform?.transform(link, file);
+    // The link transform may compare the text
+    // Formatting adds no-width spaces to some URLs
+    formatLinkText(link);
+    if (!transform || result === undefined) return;
     if (result) {
       delete link.error;
       if (transform.protocol) {