Fix virtual code when JSX child starts with > (#448)

This fixes an offset issue if the child of a JSX element in the MDX
starts with a `>` character. Typically these are blockquotes.

Refs https://github.com/orgs/mdx-js/discussions/2489

.changeset/wild-kangaroos-travel.md

@@ -0,0 +1,8 @@
+---
+'@mdx-js/language-service': patch
+'@mdx-js/language-server': patch
+'@mdx-js/typescript-plugin': patch
+'vscode-mdx': patch
+---
+
+Fix virtual code if a child of a JSX node starts with a `>` character.

packages/language-service/lib/virtual-code.js

@@ -553,7 +553,8 @@ function getEmbeddedCodes(mdx, ast, checkMdx, jsxImportSource) {
         case 'mdxJsxFlowElement':
         case 'mdxJsxTextElement': {
           if (node.children.length > 0) {
-            end = mdx.lastIndexOf('>', getNodeStartOffset(node.children[0])) + 1
+            end =
+              mdx.lastIndexOf('>', getNodeStartOffset(node.children[0]) - 1) + 1
           }
 
           updateMarkdownFromOffsets(start, end)

packages/language-service/test/language-plugin.js

@@ -2204,6 +2204,127 @@ test('create virtual code w/ mdxJsxFlowElement w/ children', () => {
   ])
 })
 
+test('create virtual code w/ mdxJsxFlowElement w/ blockquote child', () => {
+  const plugin = createMdxLanguagePlugin()
+
+  const snapshot = snapshotFromLines('<div>', '>', '</div>', '<div>></div>', '')
+
+  const code = plugin.createVirtualCode?.('/test.mdx', 'mdx', snapshot)
+
+  assert.ok(code instanceof VirtualMdxCode)
+  assert.equal(code.id, 'mdx')
+  assert.equal(code.languageId, 'mdx')
+  assert.ifError(code.error)
+  assert.equal(code.snapshot, snapshot)
+  assert.deepEqual(code.mappings, [
+    {
+      sourceOffsets: [0],
+      generatedOffsets: [0],
+      lengths: [snapshot.getLength()],
+      data: {
+        completion: true,
+        format: true,
+        navigation: true,
+        semantic: true,
+        structure: true,
+        verification: true
+      }
+    }
+  ])
+  assert.deepEqual(code.embeddedCodes, [
+    {
+      id: 'jsx',
+      languageId: 'javascriptreact',
+      mappings: [
+        {
+          sourceOffsets: [0, 8, 15, 21],
+          generatedOffsets: [779, 804, 822, 841],
+          lengths: [5, 6, 5, 6],
+          data: {
+            completion: true,
+            format: false,
+            navigation: true,
+            semantic: true,
+            structure: true,
+            verification: true
+          }
+        }
+      ],
+      snapshot: snapshotFromLines(
+        '/* @jsxRuntime automatic',
+        '@jsxImportSource react */',
+        '',
+        '/**',
+        ' * @internal',
+        ' *   **Do not use.** This function is generated by MDX for internal use.',
+        ' *',
+        ' * @param {{readonly [K in keyof MDXContentProps]: MDXContentProps[K]}} props',
+        ' *   The [props](https://mdxjs.com/docs/using-mdx/#props) that have been passed to the MDX component.',
+        ' */',
+        'function _createMdxContent(props) {',
+        '  /**',
+        '   * @internal',
+        '   *   **Do not use.** This variable is generated by MDX for internal use.',
+        '   */',
+        '  const _components = {',
+        '    // @ts-ignore',
+        '    .../** @type {0 extends 1 & MDXProvidedComponents ? {} : MDXProvidedComponents} */ ({}),',
+        '    ...props.components,',
+        '    /** The [props](https://mdxjs.com/docs/using-mdx/#props) that have been passed to the MDX component. */',
+        '    props',
+        '  }',
+        '  _components',
+        '  return <>',
+        '    <div>',
+        '    <>',
+        '    </>',
+        '    </div>',
+        '    <>',
+        '    <div>',
+        "    {''}",
+        '    </div>',
+        '    </>',
+        '  </>',
+        '}',
+        '',
+        '/**',
+        ' * Render the MDX contents.',
+        ' *',
+        ' * @param {{readonly [K in keyof MDXContentProps]: MDXContentProps[K]}} props',
+        ' *   The [props](https://mdxjs.com/docs/using-mdx/#props) that have been passed to the MDX component.',
+        ' */',
+        'export default function MDXContent(props) {',
+        '  return <_createMdxContent {...props} />',
+        '}',
+        '',
+        '// @ts-ignore',
+        '/** @typedef {(0 extends 1 & Props ? {} : Props) & {components?: {}}} MDXContentProps */',
+        ''
+      )
+    },
+    {
+      id: 'md',
+      languageId: 'markdown',
+      mappings: [
+        {
+          sourceOffsets: [5, 14, 20, 27],
+          generatedOffsets: [0, 10, 18, 26],
+          lengths: [3, 1, 1, 1],
+          data: {
+            completion: true,
+            format: false,
+            navigation: true,
+            semantic: true,
+            structure: true,
+            verification: true
+          }
+        }
+      ],
+      snapshot: snapshotFromLines('', '>', '<!---->', '<!---->><!---->', '')
+    }
+  ])
+})
+
 test('create virtual code w/ mdxJsxFlowElement w/o children', () => {
   const plugin = createMdxLanguagePlugin()