Make reveal.js slides with live cells scrollable

Closes #67.

NEWS.md

@@ -4,6 +4,8 @@
 
 * Setup blocks may now be attached to multiple exercises by providing a list for the `exercise` cell option.
 
+* Reveal.js slides containing live cells are now automatically made scrollable (#67).
+
 ## Breaking changes
 
 * Previously the cell option `autorun` defaulted to `true` for "sandbox" type cells, but `false` for exercises. This has been found to be confusing, and so `autorun: false` is now always the default state. Autorun may still be enabled by setting the cell option directly, or set document-wide using the `cell-options` YAML header.

_extensions/live/live.lua

@@ -272,7 +272,7 @@ function PyodideCodeBlock(code)
   append_ojs_template(ojs_source, ojs_vars)
 
   return pandoc.Div({
-    pandoc.Div({}, pandoc.Attr("pyodide-" .. block_id)),
+    pandoc.Div({}, pandoc.Attr("pyodide-" .. block_id, { 'exercise-cell' })),
     pandoc.RawBlock(
       "html",
       "<script type=\"pyodide-" .. block_id .. "-contents\">\n" ..
@@ -388,7 +388,7 @@ function WebRCodeBlock(code)
   HTMLWidget(block_id)
 
   return pandoc.Div({
-    pandoc.Div({}, pandoc.Attr("webr-" .. block_id)),
+    pandoc.Div({}, pandoc.Attr("webr-" .. block_id, { 'exercise-cell' })),
     pandoc.RawBlock(
       "html",
       "<script type=\"webr-" .. block_id .. "-contents\">\n" ..

_extensions/live/templates/pyodide-setup.ojs

@@ -24,6 +24,11 @@ pyodideOjs = {
     document.querySelector(".reveal > .slides").appendChild(revealStatus);
   }
 
+  // Make any reveal slides with live cells scrollable
+  document.querySelectorAll(".reveal .exercise-cell").forEach((el) => {
+    el.closest('section.slide').classList.add("scrollable");
+  })
+
   // Pyodide supplemental data and options
   const dataContent = document.querySelector(`script[type=\"pyodide-data\"]`).textContent;
   const data = JSON.parse(b64Decode(dataContent));

_extensions/live/templates/webr-setup.ojs

@@ -24,6 +24,11 @@ webROjs = {
     document.querySelector(".reveal > .slides").appendChild(revealStatus);
   }
 
+  // Make any reveal slides with live cells scrollable
+  document.querySelectorAll(".reveal .exercise-cell").forEach((el) => {
+    el.closest('section.slide').classList.add("scrollable");
+  })
+
   // webR supplemental data and options
   const dataContent = document.querySelector(`script[type=\"webr-data\"]`).textContent;
   const data = JSON.parse(b64Decode(dataContent));

docs/other/slides.qmd

@@ -5,28 +5,36 @@ format:
 title: Example Slides
 webr:
   cell-options:
+    autorun: true
     fig-width: 11
-    fig-height: 6
-    max-lines: 5
+    fig-height: 5
 ---
 
-## Read Only
+{{< include ../_extensions/live/_knitr.qmd >}}
+
+## Editable examples
+
+```{webr}
+plot(rnorm(1000))
+```
+
+## Scrollable output
 
 ```{webr}
-#| edit: false
 mod <- lm(mpg ~ cyl, data = mtcars)
+plot(mod)
 summary(mod)
 ```
 
----
+## Read Only
 
 ```{webr}
-#| runbutton: false
-#| startover: false
-plot(rnorm(1000))
+#| edit: false
+mod <- lm(mpg ~ cyl, data = mtcars)
+summary(mod)
 ```
 
----
+## Exercises
 
 ```{webr}
 #| exercise: ex1

live-runtime/src/css/reveal.css

@@ -175,6 +175,13 @@
   animation: 0.75s linear infinite spinner-grow;
 }
 
+/* Scrollable Output */
+.reveal .cell-output-container pre code {
+  overflow: auto;
+  max-height: initial;
+}
+
+/* Alerts */
 .reveal .alert.exercise-grade {
   font-size: .55em;
   position: relative;

live-runtime/src/evaluate-pyodide.ts

@@ -30,9 +30,10 @@ export class PyodideEvaluator implements ExerciseEvaluator {
   pyodide: PyodideInterfaceWorker;
   nullResult: EvaluateValue;
   constructor(pyodide: PyodideInterfaceWorker, context: EvaluateContext) {
-    this.container = document.createElement('div');
+    this.container = this.newContainer();
     this.nullResult = { result: null, evaluate_result: null, evaluator: this };
     this.container.value = this.nullResult;
+    this.container.className = 'cell-output-container';
     this.pyodide = pyodide;
     this.context = context;
     this.envManager = new EnvironmentManager(PyodideEnvironment.instance(pyodide), context);
@@ -53,6 +54,13 @@ export class PyodideEvaluator implements ExerciseEvaluator {
     );
   }
 
+  newContainer() {
+    const container = document.createElement('div');
+    container.classList.add('cell-output-container');
+    container.classList.add('cell-output-container-pyodide');
+    return container;
+  }
+
   getSetupCode(): string | undefined {
     const exId = this.options.exercise;
     const setup = document.querySelectorAll(
@@ -114,7 +122,7 @@ export class PyodideEvaluator implements ExerciseEvaluator {
         if (!this.options.output) {
           // Don't show any output in HTML, but return a value
           const value = this.container.value;
-          this.container = document.createElement("div");
+          this.container = this.newContainer();
           this.container.value = value;
         }
       }
@@ -217,7 +225,7 @@ export class PyodideEvaluator implements ExerciseEvaluator {
     result: Awaited<ReturnType<PyodideEvaluator["evaluate"]>>,
     options: EvaluateOptions = this.options
   ) {
-    const container: OJSEvaluateElement = document.createElement("div");
+    const container: OJSEvaluateElement = this.newContainer();
     container.value = this.nullResult;
 
     if (!result) {

live-runtime/src/evaluate-webr.ts

@@ -47,7 +47,7 @@ export class WebREvaluator implements ExerciseEvaluator {
   webR: WebR;
 
   constructor(webR: WebR, context: EvaluateContext) {
-    this.container = document.createElement('div');
+    this.container = this.newContainer();
     this.nullResult = { result: null, evaluate_result: null, evaluator: this };
     this.container.value = this.nullResult;
     this.webR = webR;
@@ -71,6 +71,13 @@ export class WebREvaluator implements ExerciseEvaluator {
     );
   }
 
+  newContainer() {
+    const container = document.createElement('div');
+    container.classList.add('cell-output-container');
+    container.classList.add('cell-output-container-webr');
+    return container;
+  }
+
   async purge() {
     const shelter = await this.shelter;
     shelter.purge();
@@ -139,7 +146,7 @@ export class WebREvaluator implements ExerciseEvaluator {
         if (!this.options.output) {
           // Don't show any output in HTML, but return a value
           const value = this.container.value;
-          this.container = document.createElement("div");
+          this.container = this.newContainer();
           this.container.value = value;
         }
       }
@@ -232,7 +239,7 @@ export class WebREvaluator implements ExerciseEvaluator {
 
   async asHtml(value: RList, options: EvaluateOptions = this.options) {
     const sourceLines: string[] = [];
-    const container: OJSEvaluateElement = document.createElement("div");
+    const container: OJSEvaluateElement = this.newContainer();
     container.value = this.nullResult;
 
     const appendSource = () => {