diff --git a/.changeset/shaggy-memes-post.md b/.changeset/shaggy-memes-post.md new file mode 100644 index 00000000..3646f146 --- /dev/null +++ b/.changeset/shaggy-memes-post.md @@ -0,0 +1,8 @@ +--- +'@mdx-js/language-service': patch +'@mdx-js/language-server': patch +'@mdx-js/typescript-plugin': patch +'vscode-mdx': patch +--- + +Make Markdown syntax nodes typed with `JSX.IntrinsicElements`. diff --git a/packages/language-service/lib/virtual-code.js b/packages/language-service/lib/virtual-code.js index bd457bfa..f74adc18 100644 --- a/packages/language-service/lib/virtual-code.js +++ b/packages/language-service/lib/virtual-code.js @@ -225,6 +225,52 @@ function padOffsets(mapping, padding) { } } +/** @type {Partial>} */ +const mdastElementNodeNameMap = { + blockquote: 'blockquote', + break: 'br', + delete: 'del', + emphasis: 'em', + html: 'html', + image: 'img', + imageReference: 'img', + inlineCode: 'code', + link: 'a', + linkReference: 'a', + listItem: 'li', + paragraph: 'p', + strong: 'strong', + table: 'table', + tableCell: 'td', + tableRow: 'tr', + thematicBreak: 'hr' +} +/** + * Get the JSX node names for a given AST node. + * @param {Nodes} node + * @returns {string[]} + */ +function getJsxNodeNameForMdast(node) { + if (node.type === 'code') { + return ['pre', 'code'] + } + + if (node.type === 'heading') { + return ['h' + node.depth] + } + + if (node.type === 'list') { + return node.ordered ? ['ol'] : ['ul'] + } + + if (mdastElementNodeNameMap[node.type]) { + return [/** @type string */ (mdastElementNodeNameMap[node.type])] + } + + // JSX Fragment + return [''] +} + /** * @param {string} mdx * @param {Root} ast @@ -739,7 +785,11 @@ function getEmbeddedCodes( } default: { - jsx += jsxIndent + '<>' + jsx += + jsxIndent + + getJsxNodeNameForMdast(node) + .map((name) => `<${name}>`) + .join('') break } } @@ -789,7 +839,12 @@ function getEmbeddedCodes( } default: { - jsx += jsxIndent + '' + jsx += + jsxIndent + + getJsxNodeNameForMdast(node) + .reverse() + .map((name) => ``) + .join('') break } } diff --git a/packages/language-service/test/language-plugin.js b/packages/language-service/test/language-plugin.js index 14a3d1a5..8eb9a776 100644 --- a/packages/language-service/test/language-plugin.js +++ b/packages/language-service/test/language-plugin.js @@ -2042,7 +2042,7 @@ test('create virtual code w/ prefixed JSX expressions in attributes', () => { }, { sourceOffsets: [28, 62, 103, 149, 166, 214], - generatedOffsets: [870, 916, 960, 1018, 1047, 1111], + generatedOffsets: [870, 916, 960, 1018, 1047, 1113], lengths: [34, 39, 46, 17, 35, 6], data: { completion: true, @@ -2054,7 +2054,7 @@ test('create virtual code w/ prefixed JSX expressions in attributes', () => { } }, { - generatedOffsets: [1551, 1574], + generatedOffsets: [1553, 1576], lengths: [8, 8], sourceOffsets: [62, 149], data: { @@ -2099,9 +2099,9 @@ test('create virtual code w/ prefixed JSX expressions in attributes', () => { ' return <>', '
} injected={<_components.Injected />} string="string" boolean />', '
{null}} injected={<_components.Injected>{null}} string="string" boolean>', - ' <>', + '

', " {''}", - ' ', + '

', '
', ' ', '}', @@ -2224,7 +2224,7 @@ test('create virtual code w/ mdxJsxFlowElement w/ children', () => { }, { sourceOffsets: [28, 87, 94, 95, 158, 160, 170, 231], - generatedOffsets: [870, 904, 915, 928, 966, 980, 994, 1030], + generatedOffsets: [870, 906, 917, 930, 970, 984, 998, 1036], lengths: [5, 6, 1, 9, 2, 9, 7, 8], data: { completion: true, @@ -2244,7 +2244,7 @@ test('create virtual code w/ mdxJsxFlowElement w/ children', () => { structure: true, verification: true }, - generatedOffsets: [1472], + generatedOffsets: [1478], lengths: [8], sourceOffsets: [95] } @@ -2280,19 +2280,19 @@ test('create virtual code w/ mdxJsxFlowElement w/ children', () => { ' _components', ' return <>', '
', - ' <>', + '

', " {''}", - ' ', + '

', '
', ' <_components.Injected>', - ' <>', + '

', " {''}", - ' ', + '

', ' ', ' ', - ' <>', + '

', " {''}", - ' ', + '

', '
', ' ', '}', @@ -2405,7 +2405,7 @@ test('create virtual code w/ mdxJsxFlowElement w/ blockquote child', () => { }, { sourceOffsets: [0, 8, 15, 21], - generatedOffsets: [806, 831, 849, 868], + generatedOffsets: [806, 851, 870, 889], lengths: [5, 6, 5, 6], data: { completion: true, @@ -2444,14 +2444,14 @@ test('create virtual code w/ mdxJsxFlowElement w/ blockquote child', () => { ' _components', ' return <>', '
', - ' <>', - ' ', + '
', + '
', '
', - ' <>', + '

', '

', " {''}", '
', - ' ', + '

', ' ', '}', '', @@ -2706,7 +2706,7 @@ test('create virtual code w/ mdxJsxTextElement', () => { }, { sourceOffsets: [30, 41, 42, 56], - generatedOffsets: [886, 907, 920, 945], + generatedOffsets: [887, 908, 921, 946], lengths: [7, 1, 11, 9], data: { completion: true, @@ -2718,7 +2718,7 @@ test('create virtual code w/ mdxJsxTextElement', () => { } }, { - generatedOffsets: [1396], + generatedOffsets: [1398], lengths: [8], sourceOffsets: [42], data: { @@ -2761,14 +2761,14 @@ test('create virtual code w/ mdxJsxTextElement', () => { ' }', ' _components', ' return <>', - ' <>', + '

', " {''}", '

', " {''}", ' <_components.Injected />', " {''}", ' ', - ' ', + '

', ' ', '}', '', @@ -2867,7 +2867,7 @@ test('create virtual code w/ mdxTextExpression', () => { } }, { - generatedOffsets: [822], + generatedOffsets: [823], sourceOffsets: [4], lengths: [9], data: { @@ -2906,11 +2906,11 @@ test('create virtual code w/ mdxTextExpression', () => { ' }', ' _components', ' return <>', - ' <>', + '

', " {''}", ' {Math.PI}', " {''}", - ' ', + '

', ' ', '}', '', @@ -3003,7 +3003,7 @@ test('create virtual code w/ async mdxTextExpression', () => { } }, { - generatedOffsets: [828], + generatedOffsets: [829], sourceOffsets: [4], lengths: [32], data: { @@ -3042,11 +3042,11 @@ test('create virtual code w/ async mdxTextExpression', () => { ' }', ' _components', ' return <>', - ' <>', + '

', " {''}", ' {await Promise.resolve(Math.PI)}', " {''}", - ' ', + '

', ' ', '}', '', @@ -3476,9 +3476,9 @@ test('create virtual code w/ dedented markdown content', () => { ' }', ' _components', ' return <>', - ' <>', + '

', " {''}", - ' ', + '

', ' ', '}', '', @@ -3830,9 +3830,9 @@ test('update virtual code', () => { ' }', ' _components', ' return <>', - ' <>', + '

', " {''}", - ' ', + '

', ' ', '}', '', @@ -5242,9 +5242,9 @@ test('rehype-mdx-title matching rank', () => { ' }', ' _components', ' return <>', - ' <>', + '

', " {''}", - ' ', + '

', ' ', '}', '',