[ReveaJS] Set code output content dynamically based on remaining space

custom-reveal-config.html

<script type="text/javascript">
  Reveal.on('slidechanged', event => {
    
    getNodes = function(slide) {
      var level1 = slide.querySelectorAll(":scope > *")
      childs = []
      for (let e of level1) {
        if (e.nodeName === "DIV" && e.className.includes('cell')) {
          var level2 = e.querySelectorAll(":scope > *:not(div.cell-output)")
          childs.push(...level2)
        } else {
          childs.push(e)
        }
      }
      return childs
    }
  
    allHeight = function(nodes) {
      var sum = 0;
      all.forEach((x) => {
        size = x.offsetHeight;
        marginTop = parseInt(window.getComputedStyle(x).getPropertyValue('margin-top'));
        marginBottom = parseInt(window.getComputedStyle(x).getPropertyValue('margin-bottom'));
      sum+=size+marginTop+marginBottom
      })
      return sum
    }
    
    all = getNodes(event.currentSlide)
    height = allHeight(all)
    vp = document.querySelector('body.reveal-viewport')
    slideHeight = parseInt(window.getComputedStyle(vp).getPropertyValue('--slide-height'));
    
    codeCellOutput = event.currentSlide.querySelector('div.cell-output > pre > code')
    if (codeCellOutput) {
      codeCellOutput.style.maxHeight = slideHeight-allHeight(all)+'px'
    }
  })
</script>

test.qmd

---
title: "Slideshow"
author: "author"
format:
  revealjs:
    width: 1920
    height: 1080
    include-after-body: custom-reveal.html
---

## First slide

```{r}
#| echo: true
#| code-overflow: wrap
#| tidy: true

data("mtcars")
rbind(mtcars, mtcars, mtcars)
```