diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
index e2d3c0e4ab77..38d0f0857371 100644
--- 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.
+
+
+ ```md
+
+ _foo bar_
+
+
+ _foo
+
+ bar_
+
+
+ _foo 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
index ef09b21b77c5..7ab176df830c 100644
--- 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" ||
/^$/.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
index 9b73c20b74a4..40f036569e0c 100644
--- 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
index 83736b602727..a75448a9e9c8 100644
--- 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
index e98278016054..f7d5593854f9 100644
--- 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 ,
+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. |
+| **Row 2 Code** | Some text. |
+| **Row 2 Code** | Some text. |
+
+=====================================output=====================================
+This is an example of a component _being used in some italic markdown with some ,
+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. |
+| **Row 2 Code** | Some text. |
+| **Row 2 Code** | 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 ,
+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. |
+| **Row 2 Code** | Some text. |
+| **Row 2 Code** | Some text. |
+
+=====================================output=====================================
+This is an example of a component _being used in some italic markdown with some ,
+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. |
+| **Row 2 Code** | Some text. |
+| **Row 2 Code** | Some text. |
+
+================================================================================
+`;
+
exports[`jsx.mdx 1`] = `
====================================options=====================================
parsers: ["mdx"]
diff --git a/tests/mdx/inline-html.mdx b/tests/mdx/inline-html.mdx
new file mode 100644
index 000000000000..6a725f06299a
--- /dev/null
+++ 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 ,
+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. |
+| **Row 2 Code** | Some text. |
+| **Row 2 Code** | Some text. |