fix(mdx): text with whitespace after JSX trim incorrectly (#6340)

CHANGELOG.unreleased.md

@@ -44,6 +44,29 @@ const link = <a href="example.com">http://example.com</a>;
 
 -->
 
+#### MDX: fix text with whitespace after JSX trim incorrectly ([#6340] by [@JounQin])
+
+Previous versions format text with whitespace after JSX incorrectly in mdx, this has been fixed in this version.
+
+<!-- prettier-ignore -->
+```md
+<!-- Input -->
+# Heading
+<Hello>
+    test   <World />   test
+</Hello>       123
+
+<!-- Output (Prettier stable) -->
+<Hello>
+  test <World /> test
+</Hello>123
+
+<!-- Output (Prettier master) -->
+<Hello>
+  test <World /> test
+</Hello> 123
+```
+
 #### MDX: Adjacent JSX elements should be allowed in mdx ([#6332] by [@JounQin])
 
 Previous versions would not format adjacent JSX elements in mdx, this has been fixed in this version.
@@ -65,7 +88,7 @@ SyntaxError: Unexpected token (3:9)
 // Output (Prettier master)
 <Hello>
   test <World /> test
-</Hello>123      ^
+</Hello>123
 
 
 // Input
@@ -405,6 +428,7 @@ const foo = [abc, def, ghi, jkl, mno, pqr, stu, vwx, yz] as (
 [#6284]: https://github.com/prettier/prettier/pull/6284
 [#6301]: https://github.com/prettier/prettier/pull/6301
 [#6307]: https://github.com/prettier/prettier/pull/6307
+[#6340]: https://github.com/prettier/prettier/pull/6340
 [@duailibe]: https://github.com/duailibe
 [@gavinjoyce]: https://github.com/gavinjoyce
 [@sosukesuzuki]: https://github.com/sosukesuzuki

src/language-markdown/parser-markdown.js

@@ -68,9 +68,10 @@ function htmlToJsx() {
       }
 
       return nodes.reduce((newNodes, { sourceSpan: position, type }) => {
-        const value = node.value
+        const value = node.value.slice(
-          .slice(position.start.offset, position.end.offset)
+          position.start.offset,
-          .trim();
+          position.end.offset
+        );
 
         if (value) {
           newNodes.push({

src/language-markdown/printer-markdown.js

@@ -115,7 +115,7 @@ function genericPrint(path, options, print) {
       const index = parentNode.children.indexOf(node);
       const prevNode = parentNode.children[index - 1];
       const nextNode = parentNode.children[index + 1];
-      const hasPrevOrNextWord = // `1*2*3` is considered emphais but `1_2_3` is not
+      const hasPrevOrNextWord = // `1*2*3` is considered emphasis but `1_2_3` is not
         (prevNode &&
           prevNode.type === "sentence" &&
           prevNode.children.length > 0 &&
@@ -770,35 +770,55 @@ function isPrettierIgnore(node) {
   return match === null ? false : match[1] ? match[1] : "next";
 }
 
-function shouldNotPrePrintHardline(node, data) {
+function isInlineNode(node) {
-  const isFirstNode = data.parts.length === 0;
+  return node && INLINE_NODE_TYPES.indexOf(node.type) !== -1;
-  const isInlineNode = INLINE_NODE_TYPES.indexOf(node.type) !== -1;
+}
+
+function isEndsWithHardLine(node) {
+  return node && /\n+$/.test(node.value);
+}
+
+function last(nodes) {
+  return nodes && nodes[nodes.length - 1];
+}
+
+function shouldNotPrePrintHardline(node, { parentNode, parts, prevNode }) {
+  const isFirstNode = parts.length === 0;
 
   const isInlineHTML =
     node.type === "html" &&
-    INLINE_NODE_WRAPPER_TYPES.indexOf(data.parentNode.type) !== -1;
+    INLINE_NODE_WRAPPER_TYPES.indexOf(parentNode.type) !== -1;
 
-  return isFirstNode || isInlineNode || isInlineHTML;
+  const isAfterHardlineNode =
+    prevNode &&
+    (isEndsWithHardLine(prevNode) ||
+      isEndsWithHardLine(last(prevNode.children)));
+
+  return (
+    isFirstNode || isInlineNode(node) || isInlineHTML || isAfterHardlineNode
+  );
 }
 
-function shouldPrePrintDoubleHardline(node, data) {
+function shouldPrePrintDoubleHardline(node, { parentNode, prevNode }) {
-  const isSequence = (data.prevNode && data.prevNode.type) === node.type;
+  const prevNodeType = prevNode && prevNode.type;
+  const nodeType = node.type;
+
+  const isSequence = prevNodeType === nodeType;
   const isSiblingNode =
-    isSequence && SIBLING_NODE_TYPES.indexOf(node.type) !== -1;
+    isSequence && SIBLING_NODE_TYPES.indexOf(nodeType) !== -1;
 
-  const isInTightListItem =
+  const isInTightListItem = parentNode.type === "listItem" && !parentNode.loose;
-    data.parentNode.type === "listItem" && !data.parentNode.loose;
+  const isPrevNodeLooseListItem = prevNodeType === "listItem" && prevNode.loose;
-
+  const isPrevNodePrettierIgnore = isPrettierIgnore(prevNode) === "next";
-  const isPrevNodeLooseListItem =
-    data.prevNode && data.prevNode.type === "listItem" && data.prevNode.loose;
-
-  const isPrevNodePrettierIgnore = isPrettierIgnore(data.prevNode) === "next";
 
   const isBlockHtmlWithoutBlankLineBetweenPrevHtml =
-    node.type === "html" &&
+    nodeType === "html" &&
-    data.prevNode &&
+    prevNodeType === "html" &&
-    data.prevNode.type === "html" &&
+    prevNode.position.end.line + 1 === node.position.start.line;
-    data.prevNode.position.end.line + 1 === node.position.start.line;
+
+  const isJsxInlineSibling =
+    (prevNodeType === "jsx" && isInlineNode(node)) ||
+    (nodeType === "jsx" && isInlineNode(prevNode));
 
   return (
     isPrevNodeLooseListItem ||
@@ -806,7 +826,8 @@ function shouldPrePrintDoubleHardline(node, data) {
       isSiblingNode ||
       isInTightListItem ||
       isPrevNodePrettierIgnore ||
-      isBlockHtmlWithoutBlankLineBetweenPrevHtml
+      isBlockHtmlWithoutBlankLineBetweenPrevHtml ||
+      isJsxInlineSibling
     )
   );
 }

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

@@ -256,6 +256,15 @@ printWidth: 80
 
 ---
 
+<Hello>
+    test   <World />   test
+</Hello>       123
+<Hello>
+    test   <World />   test
+</Hello>       234
+
+---
+
 | Column 1 | Column 2 |
 |---|---|
 | Text | <Hello>Text</Hello> |
@@ -280,6 +289,15 @@ printWidth: 80
 
 ---
 
+<Hello>
+  test <World /> test
+</Hello> 123
+<Hello>
+  test <World /> test
+</Hello> 234
+
+---
+
 | Column 1 | Column 2            |
 | -------- | ------------------- |
 | Text     | <Hello>Text</Hello> |
@@ -314,6 +332,15 @@ semi: false
 
 ---
 
+<Hello>
+    test   <World />   test
+</Hello>       123
+<Hello>
+    test   <World />   test
+</Hello>       234
+
+---
+
 | Column 1 | Column 2 |
 |---|---|
 | Text | <Hello>Text</Hello> |
@@ -338,6 +365,15 @@ semi: false
 
 ---
 
+<Hello>
+  test <World /> test
+</Hello> 123
+<Hello>
+  test <World /> test
+</Hello> 234
+
+---
+
 | Column 1 | Column 2            |
 | -------- | ------------------- |
 | Text     | <Hello>Text</Hello> |

tests/mdx/jsx.mdx

@@ -18,6 +18,15 @@
 
 ---
 
+<Hello>
+    test   <World />   test
+</Hello>       123
+<Hello>
+    test   <World />   test
+</Hello>       234
+
+---
+
 | Column 1 | Column 2 |
 |---|---|
 | Text | <Hello>Text</Hello> |