Fix fenced code block in a JS templates (#19908)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: fisker <lionkay@gmail.com>

changelog_unreleased/markdown/19908.md

@@ -0,0 +1,37 @@
+#### Fix fenced code block in a JS templates (#19908 by @Kjubikstronk)
+
+<!-- prettier-ignore -->
+````jsx
+// Input
+const content = markdown`
+\`\`\`js
+markdown\`
+    \\\`\\\`\\\`js
+    console.log('hi');
+    \\\`\\\`\\\`
+\`
+\`\`\`
+`;
+
+// Prettier stable
+const content = markdown`
+~~~js
+markdown\`
+  ~~~js
+  console.log("hi");
+  ~~~
+\`;
+~~~
+`;
+
+// Prettier main
+const content = markdown`
+~~~~js
+markdown\`
+  ~~~js
+  console.log("hi");
+  ~~~
+\`;
+~~~~
+`;
+````

src/language-markdown/embed.js

@@ -47,7 +47,7 @@ function embed(path, options) {
           textToDocOptions,
         );
 
-        const style = printCodeFences(path, options);
+        const style = printCodeFences(doc, options);
 
         return markAsRoot([
           style,

src/language-markdown/print/code.js

@@ -1,34 +1,43 @@
-import { align, hardline, replaceEndOfLine } from "../../document/index.js";
+import {
+  align,
+  hardline,
+  printDocToString,
+  replaceEndOfLine,
+} from "../../document/index.js";
 import getMaxContinuousCount from "../../utilities/get-max-continuous-count.js";
 import { getFencedCodeBlockValue } from "../utilities.js";
 
-function printCodeFences(path, options) {
+function printCodeFences(valueDoc, options) {
   const styleUnit = options.__inJsTemplate ? "~" : "`";
+  const value =
+    typeof valueDoc === "string"
+      ? valueDoc
+      : printDocToString(valueDoc, {
+          ...options,
+          printWidth: Number.POSITIVE_INFINITY,
+          endOfLine: "lf",
+        }).formatted;
 
   return styleUnit.repeat(
-    Math.max(3, getMaxContinuousCount(path.node.value, styleUnit) + 1),
+    Math.max(3, getMaxContinuousCount(value, styleUnit) + 1),
   );
 }
 
 function printFencedCodeBlock(path, options) {
   const { node } = path;
 
-  const styleUnit = options.__inJsTemplate ? "~" : "`";
-  const style = styleUnit.repeat(
-    Math.max(3, getMaxContinuousCount(node.value, styleUnit) + 1),
-  );
+  const value =
+    options.parser === "mdx"
+      ? getFencedCodeBlockValue(node, options.originalText)
+      : node.value;
+  const style = printCodeFences(value, options);
 
   return [
     style,
     node.lang || "",
     node.meta ? " " + node.meta : "",
     hardline,
-    replaceEndOfLine(
-      options.parser === "mdx"
-        ? getFencedCodeBlockValue(node, options.originalText)
-        : node.value,
-      hardline,
-    ),
+    replaceEndOfLine(value, hardline),
     hardline,
     style,
   ];

tests/config/format-test/failed-format-tests.js

@@ -10,10 +10,6 @@ const unstableTests = new Map(
     ],
     ["js/ignore/semi/head-ignored.js", (options) => options.semi === false],
     "js/comments/return-statement.js",
-    [
-      "js/multiparser-markdown/codeblock.js",
-      (options) => options.proseWrap === "always",
-    ],
     "flow/hook/declare-hook.js",
     "flow/hook/hook-type-annotation.js",
     "flow/comments/type_annotations.js",

tests/format/js/multiparser-markdown/__snapshots__/format.test.js.snap

@@ -69,15 +69,35 @@ markdown\\\`
 \\\`\\\`\\\`
 \`;
 
+md\`
+\\\`\\\`\\\`js
+markdown\\\`
+    \\\\\\\`\\\\\\\`\\\\\\\`\\\\\\\`js
+    console.log('hi');
+    \\\\\\\`\\\\\\\`\\\\\\\`\\\\\\\`
+\\\`
+\\\`\\\`\\\`
+\`;
+
 =====================================output=====================================
 md\`
-~~~js
+~~~~js
 markdown\\\`
   ~~~js
   console.log("hi");
   ~~~
 \\\`;
-~~~
+~~~~
+\`;
+
+md\`
+~~~~js
+markdown\\\`
+  ~~~js
+  console.log("hi");
+  ~~~
+\\\`;
+~~~~
 \`;
 
 ================================================================================

tests/format/js/multiparser-markdown/codeblock.js

@@ -7,3 +7,13 @@ markdown\`
 \`
 \`\`\`
 `;
+
+md`
+\`\`\`js
+markdown\`
+    \\\`\\\`\\\`\\\`js
+    console.log('hi');
+    \\\`\\\`\\\`\\\`
+\`
+\`\`\`
+`;