Fix MDX html parsing errors (#6949)

* Fix MDX html parsing errors

For MDX wrap JSX parsing in a fragment before sending it of to babel for
parsing and formatting. In MDX adjacent JSX tags are permitted in the
root.

An option sent to the babel parser omits printing the root fragment and
instead just prints its children.

Solves #6943

* an attempt to address JounQin's comments

* use <$>...</$> instead of <>...</>

* refactoring

changelog_unreleased/mdx/pr-6949.md

@@ -0,0 +1,43 @@
+#### Fix MDX html parsing errors ([#6949](https://github.com/prettier/prettier/pull/6949) by [@Tigge](https://github.com/Tigge) & [@thorn0](https://github.com/thorn0))
+
+MDX parsing for JSX failed when encountering JSX elements that where not
+parsable as HTML. Such as `<Tag value={{a: 'b'}}>test</Tag>`
+
+<!-- prettier-ignore -->
+````md
+<!-- Input -->
+
+<Tag  value={ {a :  'b'   } }>test</ Tag>
+
+<Foo bg={ 'red' } >
+   <div  style={{   display:   'block'}   }>
+      <Bar    >hi    </Bar>
+       {  hello       }
+         {     /* another comment */}
+            </div>
+</Foo>
+
+<!-- Prettier stable -->
+
+```
+SyntaxError: Unexpected closing tag "Tag". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (1:35)
+> 1 | <Tag  value={ {a :  'b'   } }>test</ Tag>
+    |                                   ^
+  2 | 
+  3 | <Foo bg={ 'red' } >
+  4 |    <div  style={{   display:   'block'}   }>
+```
+
+<!-- Prettier master -->
+
+<Tag value={{ a: "b" }}>test</Tag>
+
+<Foo bg={"red"}>
+  <div style={{ display: "block" }}>
+    <Bar>hi </Bar>
+    {hello}
+    {/* another comment */}
+  </div>
+</Foo>
+
+````