From 68d3e74afeccb5525d3dd9a2bc7e8b4137745245 Mon Sep 17 00:00:00 2001 From: JounQin Date: Wed, 14 Aug 2019 18:45:59 +0800 Subject: [PATCH] fix(mdx): text with whitespace after JSX trim incorrectly (#6340) --- CHANGELOG.unreleased.md | 26 ++++++++- src/language-markdown/parser-markdown.js | 7 +-- src/language-markdown/printer-markdown.js | 63 ++++++++++++++-------- tests/mdx/__snapshots__/jsfmt.spec.js.snap | 36 +++++++++++++ tests/mdx/jsx.mdx | 9 ++++ 5 files changed, 116 insertions(+), 25 deletions(-) diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md index 6a256f116..47f1c08b5 100644 --- a/CHANGELOG.unreleased.md +++ b/CHANGELOG.unreleased.md @@ -44,6 +44,29 @@ const link = http://example.com; --> +#### 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. + + +```md + +# Heading + + test test + 123 + + + + test test +123 + + + + test test + 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) test test -123 ^ +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 diff --git a/src/language-markdown/parser-markdown.js b/src/language-markdown/parser-markdown.js index 717394abf..30b0b41b0 100644 --- a/src/language-markdown/parser-markdown.js +++ b/src/language-markdown/parser-markdown.js @@ -68,9 +68,10 @@ function htmlToJsx() { } return nodes.reduce((newNodes, { sourceSpan: position, type }) => { - const value = node.value - .slice(position.start.offset, position.end.offset) - .trim(); + const value = node.value.slice( + position.start.offset, + position.end.offset + ); if (value) { newNodes.push({ diff --git a/src/language-markdown/printer-markdown.js b/src/language-markdown/printer-markdown.js index 5c3e9004e..16571274c 100644 --- a/src/language-markdown/printer-markdown.js +++ b/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) { - const isFirstNode = data.parts.length === 0; - const isInlineNode = INLINE_NODE_TYPES.indexOf(node.type) !== -1; +function isInlineNode(node) { + return node && 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) { - const isSequence = (data.prevNode && data.prevNode.type) === node.type; +function shouldPrePrintDoubleHardline(node, { parentNode, prevNode }) { + 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 = - data.parentNode.type === "listItem" && !data.parentNode.loose; - - const isPrevNodeLooseListItem = - data.prevNode && data.prevNode.type === "listItem" && data.prevNode.loose; - - const isPrevNodePrettierIgnore = isPrettierIgnore(data.prevNode) === "next"; + const isInTightListItem = parentNode.type === "listItem" && !parentNode.loose; + const isPrevNodeLooseListItem = prevNodeType === "listItem" && prevNode.loose; + const isPrevNodePrettierIgnore = isPrettierIgnore(prevNode) === "next"; const isBlockHtmlWithoutBlankLineBetweenPrevHtml = - node.type === "html" && - data.prevNode && - data.prevNode.type === "html" && - data.prevNode.position.end.line + 1 === node.position.start.line; + nodeType === "html" && + prevNodeType === "html" && + 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 ) ); } diff --git a/tests/mdx/__snapshots__/jsfmt.spec.js.snap b/tests/mdx/__snapshots__/jsfmt.spec.js.snap index ed8f85bd7..bc73e177e 100644 --- a/tests/mdx/__snapshots__/jsfmt.spec.js.snap +++ b/tests/mdx/__snapshots__/jsfmt.spec.js.snap @@ -256,6 +256,15 @@ printWidth: 80 --- + + test test + 123 + + test test + 234 + +--- + | Column 1 | Column 2 | |---|---| | Text | Text | @@ -280,6 +289,15 @@ printWidth: 80 --- + + test test + 123 + + test test + 234 + +--- + | Column 1 | Column 2 | | -------- | ------------------- | | Text | Text | @@ -314,6 +332,15 @@ semi: false --- + + test test + 123 + + test test + 234 + +--- + | Column 1 | Column 2 | |---|---| | Text | Text | @@ -338,6 +365,15 @@ semi: false --- + + test test + 123 + + test test + 234 + +--- + | Column 1 | Column 2 | | -------- | ------------------- | | Text | Text | diff --git a/tests/mdx/jsx.mdx b/tests/mdx/jsx.mdx index 4a937037c..47b911be6 100644 --- a/tests/mdx/jsx.mdx +++ b/tests/mdx/jsx.mdx @@ -18,6 +18,15 @@ --- + + test test + 123 + + test test + 234 + +--- + | Column 1 | Column 2 | |---|---| | Text | Text |