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) => `${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 <>',
- ' <>',
+ ' ',
" {''}",
- ' >',
+ '
',
' >',
'}',
'',