MDX: fix unstable format when embedded off (#8825)

changelog_unreleased/api/pr-7875.md

@@ -1,4 +1,4 @@
-#### Add --embedded-language-formatting={auto,off} option ([#7875](https://github.com/prettier/prettier/pull/7875) by [@bakkot](https://github.com/bakkot))
+#### Add --embedded-language-formatting={auto,off} option ([#7875](https://github.com/prettier/prettier/pull/7875) by [@bakkot](https://github.com/bakkot), [#8825](https://github.com/prettier/prettier/pull/8825) by [@fisker](https://github.com/fiskers))
 
 When Prettier identifies cases where it looks like you've placed some code it knows how to format within a string in another file, like in a tagged template in JavaScript with a tag named `html` or in code blocks in Markdown, it will by default try to format that code.
 

src/language-markdown/printer-markdown.js

@@ -436,7 +436,9 @@ function genericPrint(path, options, print) {
     // MDX
     case "importExport":
     case "jsx":
-      return node.value; // fallback to the original text if multiparser failed
+      // fallback to the original text if multiparser failed
+      // or `embeddedLanguageFormatting: "off"`
+      return concat([node.value, hardline]);
     case "math":
       return concat([
         "$$",

tests/misc/embedded_language_formatting/mdx/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,172 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`import-export.mdx - {"embeddedLanguageFormatting":"off"} format 1`] = `
+====================================options=====================================
+embeddedLanguageFormatting: "off"
+parsers: ["mdx"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+import D from 'd'
+import {A,B,C}    from "hello-world"
+import {AAAAAAAAAAAAAAAAAAAAAAAA, BBBBBBBBBBBBBBBBBBBBBB, CCCCCCCCCCCCCCCCCCCCCCC}   from  'xyz';
+
+---
+
+import D from 'd'
+
+
+import {A,B,C}    from "hello-world"
+
+
+import {AAAAAAAAAAAAAAAAAAAAAAAA, BBBBBBBBBBBBBBBBBBBBBB, CCCCCCCCCCCCCCCCCCCCCCC}   from  'xyz';
+
+---
+
+export const meta = {
+authors: [fred, sue],
+layout: Layout
+}
+
+export default () =>
+  <Doc     components={{
+        h1: ui.Heading,
+         p:    ui.Text,
+      code:     ui.Code
+         }}
+      />
+
+---
+
+export const a = 1;
+export const b = 1;
+
+=====================================output=====================================
+import D from 'd'
+import {A,B,C}    from "hello-world"
+import {AAAAAAAAAAAAAAAAAAAAAAAA, BBBBBBBBBBBBBBBBBBBBBB, CCCCCCCCCCCCCCCCCCCCCCC}   from  'xyz';
+
+---
+
+import D from 'd'
+
+import {A,B,C}    from "hello-world"
+
+import {AAAAAAAAAAAAAAAAAAAAAAAA, BBBBBBBBBBBBBBBBBBBBBB, CCCCCCCCCCCCCCCCCCCCCCC}   from  'xyz';
+
+---
+
+export const meta = {
+authors: [fred, sue],
+layout: Layout
+}
+
+export default () =>
+  <Doc     components={{
+        h1: ui.Heading,
+         p:    ui.Text,
+      code:     ui.Code
+         }}
+      />
+
+---
+
+export const a = 1;
+export const b = 1;
+
+================================================================================
+`;
+
+exports[`jsx.mdx - {"embeddedLanguageFormatting":"off"} format 1`] = `
+====================================options=====================================
+embeddedLanguageFormatting: "off"
+parsers: ["mdx"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<Heading hi='there'>Hello, world!
+</Heading>
+
+---
+
+<Hello>
+    test   <World />   test
+</Hello>123
+
+---
+
+<Hello>
+    test   <World />   test
+</Hello>
+<Hello>
+    test   <World />   test
+</Hello>123
+
+---
+
+<Hello>
+    test   <World />   test
+</Hello>       123
+<Hello>
+    test   <World />   test
+</Hello>       234
+
+---
+
+<>
+    test   <World        />   test
+</>       123
+
+---
+
+| Column 1 | Column 2 |
+|---|---|
+| Text | <Hello>Text</Hello> |
+
+=====================================output=====================================
+<Heading hi='there'>Hello, world!
+</Heading>
+
+
+---
+
+<Hello>
+    test   <World />   test
+</Hello>123
+
+
+---
+
+<Hello>
+    test   <World />   test
+</Hello>
+<Hello>
+    test   <World />   test
+</Hello>123
+
+
+---
+
+<Hello>
+    test   <World />   test
+</Hello>       123
+<Hello>
+    test   <World />   test
+</Hello>       234
+
+
+---
+
+<>
+    test   <World        />   test
+</>       123
+
+
+---
+
+| Column 1 | Column 2            |
+| -------- | ------------------- |
+| Text     | <Hello>Text</Hello> |
+
+================================================================================
+`;

tests/misc/embedded_language_formatting/mdx/import-export.mdx

@@ -0,0 +1,33 @@
+import D from 'd'
+import {A,B,C}    from "hello-world"
+import {AAAAAAAAAAAAAAAAAAAAAAAA, BBBBBBBBBBBBBBBBBBBBBB, CCCCCCCCCCCCCCCCCCCCCCC}   from  'xyz';
+
+---
+
+import D from 'd'
+
+
+import {A,B,C}    from "hello-world"
+
+
+import {AAAAAAAAAAAAAAAAAAAAAAAA, BBBBBBBBBBBBBBBBBBBBBB, CCCCCCCCCCCCCCCCCCCCCCC}   from  'xyz';
+
+---
+
+export const meta = {
+authors: [fred, sue],
+layout: Layout
+}
+
+export default () =>
+  <Doc     components={{
+        h1: ui.Heading,
+         p:    ui.Text,
+      code:     ui.Code
+         }}
+      />
+
+---
+
+export const a = 1;
+export const b = 1;

tests/misc/embedded_language_formatting/mdx/jsfmt.spec.js

@@ -0,0 +1 @@
+run_spec(__dirname, ["mdx"], { embeddedLanguageFormatting: "off" });

tests/misc/embedded_language_formatting/mdx/jsx.mdx

@@ -0,0 +1,38 @@
+<Heading hi='there'>Hello, world!
+</Heading>
+
+---
+
+<Hello>
+    test   <World />   test
+</Hello>123
+
+---
+
+<Hello>
+    test   <World />   test
+</Hello>
+<Hello>
+    test   <World />   test
+</Hello>123
+
+---
+
+<Hello>
+    test   <World />   test
+</Hello>       123
+<Hello>
+    test   <World />   test
+</Hello>       234
+
+---
+
+<>
+    test   <World        />   test
+</>       123
+
+---
+
+| Column 1 | Column 2 |
+|---|---|
+| Text | <Hello>Text</Hello> |