feat: Add editorHeight option

[gadenbuie]

• Fixes Add ability to set editorHeight quarto-ext/shinylive#33

This PR builds on #140 to incorporate an editorHeight option. Editor height has the same semantics as viewerHeight (hence the dependency on #140), where users can provide a numeric value taken as pixels or a string, taken as a CSS value.

I updated the following layouts to use editorHeight

1. editor-viewer

   • In a vertical layout, editorHeight and viewerHeight are supplied to grid-template-rows. In other words, the editor and viewer are independently sized. The default value is auto, 200px (editor, viewer).
   • In a horizontal layout, the editor and viewer are next to each other. In this case, setting either editorHeight or viewerHeight can constrain the overall height of the component. If both are set (to values other than auto), we take the minimum height of the two.

2. editor-terminal-viewer

   • This app mode is functionally equivalent to editor-viewer in a horizontal layout, but we apply the height to the .shinylive-container element, leaving grid-template-rows to determine the relative size of the editor/terminal cells. If either are set, we apply the height constrain to the overall component, using the minimum if both are set.

3. editor-terminal

   • Applies editorHeight to the overall component via grid-template-rows. Sidenote: this view isn't available in Quarto.

4. editor-cell

   • Applies editorHeight to the Editor component. I adjusted padding a bit so that the scroll bars of the editor are at the edges of the editor container.

Testing

Prior to this PR, in most situations, the shinylive component is generally driven by the code height. The example document below contains a large single-file app that exhibits this behavior. With this PR, the overall component height is configurable in Quarto documents.

Example document

---
title: Shinylive in Quarto example
format: html
filters:
  - shinylive
---

This is a Shinylive application embedded in a Quarto doc.

```{shinylive-python}
#| standalone: true
#| layout: vertical
#| components: [editor, terminal, viewer]
#| editorHeight: 700px
#| viewerHeight: 600px

from shiny import *

app_ui = ui.page_fluid(
    ui.input_slider("n", "N", 0, 100, 40),
    ui.output_text_verbatim("txt"),
)

def server(input, output, session):
    @output
    @render.text
    def txt():
        return f"The value of n*2 is {input.n() * 2}"

app = App(app_ui, server)

# 1
# 2
# 3
# 4
# 5
# 6
# 7
# 8
# 9
# 10
# 11
# 12
# 13
# 14
# 15
# 16
# 17
# 18
# 19
# 20
# 21
# 22
# 23
# 24
# 25
# 26
# 27
# 28
# 29
# 30
# 31
# 32
# 33
# 34
# 35
# 36
# 37
# 38
# 39
# 40
# 41
# 42
# 43
# 44
# 45
# 46
# 47
# 48
# 49
# 50
# 51
# 52
# 53
# 54
# 55
# 56
# 57
# 58
# 59
# 60
# 61
# 62
# 63
# 64
# 65
# 66
# 67
# 68
# 69
# 70
# 71
# 72
# 73
# 74
# 75
# 76
# 77
# 78
# 79
# 80
# 81
# 82
# 83
# 84
# 85
# 86
# 87
# 88
# 89
# 90
# 91
# 92
# 93
# 94
# 95
# 96
# 97
# 98
# 99
# 100
```

[schloerke]

Thank you

[wch]

Looks good!