Indent all data references with original left-side whitespace (#42413)

src/content-render/liquid/data.js

@@ -29,7 +29,19 @@ export default {
       return
     }
 
-    if (text.trim().split('\n\n').length === 1 && text.split('\n').length > 0) {
+    // Any time what we're about to replace in here has more than one line,
+    // if the use of `{% data ... %}` was itself indented, from the left,
+    // keep *that* indentation, in replaced output, for every line.
+    //
+    // For example:
+    //
+    //   1. Bullet point
+    //      {% data variables.foo.bar %}
+    //
+    // In this example, the `{% data ...` starts with 3 whitespaces
+    // (based on the `1. Bull...` in the example). So put 3 whitespaces
+    // in front every line of the output.
+    if (text.split('\n').length > 0) {
       const { input, begin } = this.tagToken
       let i = 1
       while (input.charAt(begin - i) === ' ') {

tests/fixtures/content/get-started/liquid/data.md

@@ -58,6 +58,8 @@ And now for a table on its own starting line
 
 1. Point 1
 
+   {% data reusables.injectables.paragraphs %}
+
 1. Point 2
 
    What's important here is that in CommonMark when a Markdown table

tests/fixtures/data/reusables/injectables/paragraphs.md

@@ -0,0 +1,5 @@
+Paragraph one
+
+Paragraph two
+
+Paragraph three

tests/rendering-fixtures/liquid.js

@@ -278,5 +278,24 @@ describe('data tag', () => {
 
     // The code block also a reusables that is just one line.
     expect(codeBlock).toMatch(/One Two Three Four\n/)
+
+    // On its own, if you look at
+    // tests/fixtures/data/reusables/injectables/paragraphs.md, you'll
+    // see each line is NOT prefixed with whitespace indentation.
+    // But because `{% data reusables.injectables.paragraphs %}` is
+    // inserted with some indentation, that's replicated on every line.
+    const li = $('#article-contents li')
+      .filter((_, element) => {
+        return $(element).text().trim().startsWith('Point 1')
+      })
+      .eq(0)
+    // You can't really test the exact whitespace with cheerio,
+    // of the original HTML, but it doesn't actually matter. What
+    // matters is that within the bullet point, that starts with "Point 1",
+    // it *contains* all the paragraphs
+    // from tests/fixtures/data/reusables/injectables/paragraphs.md.
+    expect(li.text()).toMatch(/Paragraph one/)
+    expect(li.text()).toMatch(/Paragraph two/)
+    expect(li.text()).toMatch(/Paragraph three/)
   })
 })