mirror of
https://github.com/withastro/astro.git
synced 2024-12-16 21:46:22 -05:00
Fix autolinking of URLs inside links in Markdown (#3564)
This commit is contained in:
parent
0e5bb2949b
commit
76fb01cff1
4 changed files with 137 additions and 19 deletions
5
.changeset/afraid-stingrays-sell.md
Normal file
5
.changeset/afraid-stingrays-sell.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
'@astrojs/markdown-remark': patch
|
||||
---
|
||||
|
||||
Fix autolinking of URLs inside links
|
|
@ -99,14 +99,13 @@ export async function renderMarkdown(
|
|||
parser
|
||||
.use(isMDX ? [rehypeJsx, rehypeExpressions] : [rehypeRaw])
|
||||
.use(rehypeEscape)
|
||||
.use(rehypeIslands);
|
||||
.use(rehypeIslands)
|
||||
.use([rehypeCollectHeaders])
|
||||
.use(rehypeStringify, { allowDangerousHtml: true })
|
||||
|
||||
let result: string;
|
||||
try {
|
||||
const vfile = await parser
|
||||
.use([rehypeCollectHeaders])
|
||||
.use(rehypeStringify, { allowDangerousHtml: true })
|
||||
.process(input);
|
||||
const vfile = await parser.process(input);
|
||||
result = vfile.toString();
|
||||
} catch (err) {
|
||||
// Ensure that the error message contains the input filename
|
||||
|
|
|
@ -1,15 +1,14 @@
|
|||
import type { RehypePlugin } from './types.js';
|
||||
import { visit } from 'unist-util-visit';
|
||||
|
||||
const MDX_ELEMENTS = ['mdxJsxFlowElement', 'mdxJsxTextElement'];
|
||||
export default function rehypeJsx(): any {
|
||||
return function (node: any): any {
|
||||
visit(node, 'element', (child: any) => {
|
||||
child.tagName = `${child.tagName}`;
|
||||
});
|
||||
visit(node, MDX_ELEMENTS, (child: any, index: number | null, parent: any) => {
|
||||
|
||||
export default function rehypeJsx(): ReturnType<RehypePlugin> {
|
||||
return function (tree) {
|
||||
visit(tree, MDX_ELEMENTS, (node: any, index: number | null, parent: any) => {
|
||||
if (index === null || !Boolean(parent)) return;
|
||||
|
||||
const attrs = child.attributes.reduce((acc: any[], entry: any) => {
|
||||
const attrs = node.attributes.reduce((acc: any[], entry: any) => {
|
||||
let attr = entry.value;
|
||||
if (attr && typeof attr === 'object') {
|
||||
attr = `{${attr.value}}`;
|
||||
|
@ -26,23 +25,42 @@ export default function rehypeJsx(): any {
|
|||
return acc + ` ${entry.name}${attr ? '=' : ''}${attr}`;
|
||||
}, '');
|
||||
|
||||
if (child.children.length === 0) {
|
||||
child.type = 'raw';
|
||||
child.value = `<${child.name}${attrs} />`;
|
||||
if (node.children.length === 0) {
|
||||
node.type = 'raw';
|
||||
node.value = `<${node.name}${attrs} />`;
|
||||
return;
|
||||
}
|
||||
|
||||
// Replace the current child node with its children
|
||||
// If the current node is a JSX <a> element, remove autolinks from its children
|
||||
// to prevent Markdown code like `<a href="/">**Go to www.example.com now!**</a>`
|
||||
// from creating a nested link to `www.example.com`
|
||||
if (node.name === 'a') {
|
||||
visit(node, 'element', (el, elIndex, elParent) => {
|
||||
const isAutolink = (
|
||||
el.tagName === 'a' &&
|
||||
el.children.length === 1 &&
|
||||
el.children[0].type === 'text' &&
|
||||
el.children[0].value.match(/^(https?:\/\/|www\.)/i)
|
||||
);
|
||||
|
||||
// If we found an autolink, remove it by replacing it with its text-only child
|
||||
if (isAutolink) {
|
||||
elParent.children.splice(elIndex, 1, el.children[0]);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Replace the current node with its children
|
||||
// wrapped by raw opening and closing tags
|
||||
const openingTag = {
|
||||
type: 'raw',
|
||||
value: `\n<${child.name}${attrs}>`,
|
||||
value: `\n<${node.name}${attrs}>`,
|
||||
};
|
||||
const closingTag = {
|
||||
type: 'raw',
|
||||
value: `</${child.name}>\n`,
|
||||
value: `</${node.name}>\n`,
|
||||
};
|
||||
parent.children.splice(index, 1, openingTag, ...child.children, closingTag);
|
||||
parent.children.splice(index, 1, openingTag, ...node.children, closingTag);
|
||||
});
|
||||
};
|
||||
}
|
||||
|
|
96
packages/markdown/remark/test/autolinking.test.js
Normal file
96
packages/markdown/remark/test/autolinking.test.js
Normal file
|
@ -0,0 +1,96 @@
|
|||
import { renderMarkdown } from '../dist/index.js';
|
||||
import chai from 'chai';
|
||||
|
||||
describe('autolinking', () => {
|
||||
it('autolinks URLs starting with a protocol in plain text', async () => {
|
||||
const { code } = await renderMarkdown(
|
||||
`See https://example.com for more.`,
|
||||
{}
|
||||
);
|
||||
|
||||
chai
|
||||
.expect(code.replace(/\n/g, ''))
|
||||
.to.equal(`<p>See <a href="https://example.com">https://example.com</a> for more.</p>`);
|
||||
});
|
||||
|
||||
it('autolinks URLs starting with "www." in plain text', async () => {
|
||||
const { code } = await renderMarkdown(
|
||||
`See www.example.com for more.`,
|
||||
{}
|
||||
);
|
||||
|
||||
chai
|
||||
.expect(code.trim())
|
||||
.to.equal(`<p>See <a href="http://www.example.com">www.example.com</a> for more.</p>`);
|
||||
});
|
||||
|
||||
it('does not autolink URLs in code blocks', async () => {
|
||||
const { code } = await renderMarkdown(
|
||||
'See `https://example.com` or `www.example.com` for more.',
|
||||
{}
|
||||
);
|
||||
|
||||
chai
|
||||
.expect(code.trim())
|
||||
.to.equal(`<p>See <code is:raw>https://example.com</code> or ` +
|
||||
`<code is:raw>www.example.com</code> for more.</p>`);
|
||||
});
|
||||
|
||||
it('does not autolink URLs in fenced code blocks', async () => {
|
||||
const { code } = await renderMarkdown(
|
||||
'Example:\n```\nGo to https://example.com or www.example.com now.\n```',
|
||||
{}
|
||||
);
|
||||
|
||||
chai
|
||||
.expect(code)
|
||||
.to.contain(`<pre is:raw`)
|
||||
.to.contain(`Go to https://example.com or www.example.com now.`);
|
||||
});
|
||||
|
||||
it('does not autolink URLs starting with a protocol when nested inside links', async () => {
|
||||
const { code } = await renderMarkdown(
|
||||
`See [http://example.com](http://example.com) or ` +
|
||||
`<a test href="https://example.com">https://example.com</a>`,
|
||||
{}
|
||||
);
|
||||
|
||||
chai
|
||||
.expect(code.replace(/\n/g, ''))
|
||||
.to.equal(
|
||||
`<p>See <a href="http://example.com">http://example.com</a> or ` +
|
||||
`<a test href="https://example.com">https://example.com</a></p>`
|
||||
);
|
||||
});
|
||||
|
||||
it('does not autolink URLs starting with "www." when nested inside links', async () => {
|
||||
const { code } = await renderMarkdown(
|
||||
`See [www.example.com](https://www.example.com) or ` +
|
||||
`<a test href="https://www.example.com">www.example.com</a>`,
|
||||
{}
|
||||
);
|
||||
|
||||
chai
|
||||
.expect(code.replace(/\n/g, ''))
|
||||
.to.equal(
|
||||
`<p>See <a href="https://www.example.com">www.example.com</a> or ` +
|
||||
`<a test href="https://www.example.com">www.example.com</a></p>`
|
||||
);
|
||||
});
|
||||
|
||||
it('does not autolink URLs when nested several layers deep inside links', async () => {
|
||||
const { code } = await renderMarkdown(
|
||||
`<a href="https://www.example.com">**Visit _our www.example.com or ` +
|
||||
`http://localhost pages_ for more!**</a>`,
|
||||
{}
|
||||
);
|
||||
|
||||
chai
|
||||
.expect(code.replace(/\n/g, ''))
|
||||
.to.equal(
|
||||
`<a href="https://www.example.com"><strong>` +
|
||||
`Visit <em>our www.example.com or http://localhost pages</em> for more!` +
|
||||
`</strong></a>`
|
||||
);
|
||||
});
|
||||
});
|
Loading…
Reference in a new issue