Merge pull request #1257 from quarto-dev/reveal-output-location-slide

[reveal] fix `output-location: slide`

Author: jjallaire

src/format/reveal/format-reveal.ts

@@ -343,7 +343,10 @@ function revealHtmlPostprocessor(
       const parentSlide = findParentSlide(slideOutputEl);
       if (parentSlide && parentSlide.parentElement) {
         const newSlide = doc.createElement("section");
-        newSlide.id = parentSlide?.id ? parentSlide.id + "-output" : "";
+        newSlide.setAttribute(
+          "id",
+          parentSlide?.id ? parentSlide.id + "-output" : "",
+        );
         for (const clz of parentSlide.classList) {
           newSlide.classList.add(clz);
         }
@@ -361,7 +364,9 @@ function revealHtmlPostprocessor(
           newSlide.appendChild(headingEl);
         }
         newSlide.appendChild(slideOutputEl);
-        parentSlide.parentElement.appendChild(newSlide);
+        // Place the new slide after the current one
+        const nextSlide = parentSlide.nextElementSibling;
+        parentSlide.parentElement.insertBefore(newSlide, nextSlide);
       }
     }
 

tests/docs/reveal/output-location.qmd

@@ -0,0 +1,44 @@
+---
+title: "output-location"
+format: revealjs
+---
+
+## Slide before {#first-slide}
+
+Words
+
+## The slide with the code {#loc-slide}
+
+```{r}
+#| echo: true
+#| output-location: slide
+plot(mtcars)
+```
+
+## Next slides {#next-slide}
+
+Words
+
+## The slide with the code {#loc-column}
+
+```{r}
+#| echo: true
+#| output-location: column
+plot(mtcars)
+```
+
+## The slide with the code {#loc-fragment}
+
+```{r}
+#| echo: true
+#| output-location: fragment
+plot(mtcars)
+```
+
+## The slide with the code {#loc-col-fragment}
+
+```{r}
+#| echo: true
+#| output-location: column-fragment
+plot(mtcars)
+```

tests/smoke/render/render-reveal.test.ts

@@ -6,7 +6,10 @@
 */
 
 import { docs, fileLoader, outputForInput } from "../../utils.ts";
-import { ensureHtmlElements } from "../../verify.ts";
+import {
+  ensureHtmlElements,
+  ensureHtmlSelectorSatisfies,
+} from "../../verify.ts";
 import { testRender } from "./render.ts";
 
 // demo file renders ok
@@ -78,3 +81,29 @@ testRender(fragmentsDiv.input, "revealjs", false, [
     "#slide-2 > div.fragment > h3",
   ], []),
 ]);
+
+// output-location
+const outputLocation = fileLoader("reveal")("output-location.qmd", "revealjs");
+testRender(outputLocation.input, "revealjs", false, [
+  ensureHtmlElements(outputLocation.output.outputPath, [
+    "section#loc-slide + section#loc-slide-output > div.output-location-slide",
+    "section#loc-fragment > div.fragment > div.cell-output-display",
+    "section#loc-col-fragment > div.columns > div.column:nth-child(2).fragment > div.cell-output-display",
+  ], [
+    "section#loc-slide > div.output-location-slide",
+  ]),
+  ensureHtmlSelectorSatisfies(
+    outputLocation.output.outputPath,
+    "section#loc-column > div.columns > div.column",
+    (nodeList) => {
+      return nodeList.length === 2;
+    },
+  ),
+  ensureHtmlSelectorSatisfies(
+    outputLocation.output.outputPath,
+    "section#loc-col-fragment > div.columns > div.column",
+    (nodeList) => {
+      return nodeList.length === 2;
+    },
+  ),
+]);