fix(mdx): correctly recognize inline JSX (#5783)
Ika
GitHub
parent
2002ce0453
commit
1061be0702
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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"]
|
||||
|
|
|
|||
|
|
@ -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. |
|
||||
Loading…
Reference in New Issue