fix(mdx): correctly recognize inline JSX (#5783)

prettier · Jan 22, 2019 · 1061be0 · 1061be0
1 parent 2002ce0
commit 1061be0
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 34 deletions.
diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
@@ -102,7 +102,27 @@ Examples:
   }
   ```
 
+- MDX: Correctly recognize inline JSX ([#5783] by [@ikatyang])
+
+  Previously, some inline JSXs are wrongly recognized as block HTML/JSX,
+  which causes unexpected behaviors. This issue is now fixed.
+
+  <!-- prettier-ignore -->
+  ```md
+  <!-- Input -->
+  _foo <InlineJSX /> bar_
+
+  <!-- Output (Prettier stable) -->
+  _foo
+
+  <InlineJSX /> bar_
+
+  <!-- Output (Prettier master) -->
+  _foo <InlineJSX /> bar_
+  ```
+
 [@ikatyang]: https://github.com/ikatyang
 [@simenb]: https://github.com/SimenB
 [#5778]: https://github.com/prettier/prettier/pull/5778
+[#5783]: https://github.com/prettier/prettier/pull/5783
 [#5785]: https://github.com/prettier/prettier/pull/5785
diff --git a/src/language-markdown/parser-markdown.js b/src/language-markdown/parser-markdown.js
@@ -4,7 +4,7 @@ const remarkParse = require("remark-parse");
 const unified = require("unified");
 const pragma = require("./pragma");
 const parseFrontMatter = require("../utils/front-matter");
-const { mapAst } = require("./utils");
+const { mapAst, INLINE_NODE_WRAPPER_TYPES } = require("./utils");
 const mdx = require("./mdx");
 const remarkMath = require("remark-math");
 
@@ -54,10 +54,7 @@ function htmlToJsx() {
       if (
         node.type !== "html" ||
         /^<!--[\s\S]*-->$/.test(node.value) ||
-        // inline html
-        (parent.type === "paragraph" ||
-          parent.type === "tableCell" ||
-          parent.type === "heading")
+        INLINE_NODE_WRAPPER_TYPES.indexOf(parent.type) !== -1
       ) {
         return node;
       }

diff --git a/src/language-markdown/printer-markdown.js b/src/language-markdown/printer-markdown.js
@@ -25,41 +25,16 @@ const {
   getFencedCodeBlockValue,
   getOrderedListItemInfo,
   splitText,
-  punctuationPattern
+  punctuationPattern,
+  INLINE_NODE_TYPES,
+  INLINE_NODE_WRAPPER_TYPES
 } = require("./utils");
 const { replaceEndOfLineWith } = require("../common/util");
 
 const TRAILING_HARDLINE_NODES = ["importExport"];
-
 const SINGLE_LINE_NODE_TYPES = ["heading", "tableCell", "link"];
-
 const SIBLING_NODE_TYPES = ["listItem", "definition", "footnoteDefinition"];
 
-const INLINE_NODE_TYPES = [
-  "liquidNode",
-  "inlineCode",
-  "emphasis",
-  "strong",
-  "delete",
-  "link",
-  "linkReference",
-  "image",
-  "imageReference",
-  "footnote",
-  "footnoteReference",
-  "sentence",
-  "whitespace",
-  "word",
-  "break",
-  "inlineMath"
-];
-
-const INLINE_NODE_WRAPPER_TYPES = INLINE_NODE_TYPES.concat([
-  "tableCell",
-  "paragraph",
-  "heading"
-]);
-
 function genericPrint(path, options, print) {
   const node = path.getValue();
 

diff --git a/src/language-markdown/utils.js b/src/language-markdown/utils.js
@@ -7,6 +7,31 @@ const {
 } = require("./constants.evaluate");
 const { getLast } = require("../common/util");
 
+const INLINE_NODE_TYPES = [
+  "liquidNode",
+  "inlineCode",
+  "emphasis",
+  "strong",
+  "delete",
+  "link",
+  "linkReference",
+  "image",
+  "imageReference",
+  "footnote",
+  "footnoteReference",
+  "sentence",
+  "whitespace",
+  "word",
+  "break",
+  "inlineMath"
+];
+
+const INLINE_NODE_WRAPPER_TYPES = INLINE_NODE_TYPES.concat([
+  "tableCell",
+  "paragraph",
+  "heading"
+]);
+
 const kRegex = new RegExp(kPattern);
 const punctuationRegex = new RegExp(punctuationPattern);
 
@@ -193,5 +218,7 @@ module.exports = {
   splitText,
   punctuationPattern,
   getFencedCodeBlockValue,
-  getOrderedListItemInfo
+  getOrderedListItemInfo,
+  INLINE_NODE_TYPES,
+  INLINE_NODE_WRAPPER_TYPES
 };
diff --git a/tests/mdx/__snapshots__/jsfmt.spec.js.snap b/tests/mdx/__snapshots__/jsfmt.spec.js.snap
@@ -173,6 +173,63 @@ export const b = 1
 ================================================================================
 `;
 
+exports[`inline-html.mdx 1`] = `
+====================================options=====================================
+parsers: ["mdx"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+This is an example of a component _being used in some italic markdown with some <Bolded />, 
+and as you can see_ once you close the italics, it will break incorrectly when prettier formats it.
+
+| Column 1 | Column 2 |
+| -- | -- |
+| **\`Row 1 Code\`** | Some text. |
+| **<code>Row 2 Code</code>** | Some text. |
+| **<InlineCode>Row 2 Code</InlineCode>** | Some text. |
+
+=====================================output=====================================
+This is an example of a component _being used in some italic markdown with some <Bolded />,
+and as you can see_ once you close the italics, it will break incorrectly when prettier formats it.
+
+| Column 1                                | Column 2   |
+| --------------------------------------- | ---------- |
+| **\`Row 1 Code\`**                        | Some text. |
+| **<code>Row 2 Code</code>**             | Some text. |
+| **<InlineCode>Row 2 Code</InlineCode>** | Some text. |
+
+================================================================================
+`;
+
+exports[`inline-html.mdx 2`] = `
+====================================options=====================================
+parsers: ["mdx"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+This is an example of a component _being used in some italic markdown with some <Bolded />, 
+and as you can see_ once you close the italics, it will break incorrectly when prettier formats it.
+
+| Column 1 | Column 2 |
+| -- | -- |
+| **\`Row 1 Code\`** | Some text. |
+| **<code>Row 2 Code</code>** | Some text. |
+| **<InlineCode>Row 2 Code</InlineCode>** | Some text. |
+
+=====================================output=====================================
+This is an example of a component _being used in some italic markdown with some <Bolded />,
+and as you can see_ once you close the italics, it will break incorrectly when prettier formats it.
+
+| Column 1                                | Column 2   |
+| --------------------------------------- | ---------- |
+| **\`Row 1 Code\`**                        | Some text. |
+| **<code>Row 2 Code</code>**             | Some text. |
+| **<InlineCode>Row 2 Code</InlineCode>** | Some text. |
+
+================================================================================
+`;
+
 exports[`jsx.mdx 1`] = `
 ====================================options=====================================
 parsers: ["mdx"]

diff --git a/tests/mdx/inline-html.mdx b/tests/mdx/inline-html.mdx
@@ -0,0 +1,8 @@
+This is an example of a component _being used in some italic markdown with some <Bolded />, 
+and as you can see_ once you close the italics, it will break incorrectly when prettier formats it.
+
+| Column 1 | Column 2 |
+| -- | -- |
+| **`Row 1 Code`** | Some text. |
+| **<code>Row 2 Code</code>** | Some text. |
+| **<InlineCode>Row 2 Code</InlineCode>** | Some text. |