Add min-height/max-height code cell options

docs/getting_started/editor.qmd

@@ -229,6 +229,40 @@ while (TRUE) {
 }
 ```
 
+## Editor height
+
+The editor height can be controlled through the `min-lines` and `max-lines` code cell options. Internal empty lines included in the source cell contents are retained.
+
+The `min-lines` option sets the minimum height of the editor. When there are fewer lines of code, empty space is shown in the remaining space.
+
+The `max-lines` option sets the maximum height of the editor. When there are additional lines of code, the editor container can be scrolled vertically.
+
+#### Source
+
+````markdown
+```{{webr}}
+#| min-lines: 6
+#| max-lines: 10
+x <- 173
+
+y <- 205
+
+x + y
+```
+````
+
+#### Output
+
+```{webr}
+#| min-lines: 6
+#| max-lines: 10
+x <- 173
+
+y <- 205
+
+x + y
+```
+
 ## Cross References
 
 Cross-references to interactive code listings should be written using fenced div syntax. Create a fenced div with an `id` starting with `lst-`, then include the interactive code cell followed by the caption.

docs/reference/cell-options.qmd

@@ -29,6 +29,8 @@ The following code cell options can be used in `webr` or `pyodide` blocks, or se
 | `startover` | `true` | Show the "Start Over" button? |
 | `timelimit` | `30` | Execution time limit in seconds. |
 | `warning` | `true` | Show warning messages? |
+| `min-lines` | `0` | Minimum editor height in number of lines. |
+| `max-lines` | `Infinity` | Maximum editor height in number of lines. |
 : {tbl-colwidths="[10,10,80]"}
 
 ## Exercises

live-runtime/src/css/live-runtime.css

@@ -108,6 +108,11 @@
 }
 
 /* Codemirror Editor */
+.card.exercise-editor {
+  --exercise-min-lines: 0;
+  --exercise-max-lines: infinity;
+}
+
 .card.exercise-editor .card-header {
   padding: 0.5rem 1rem;
   background-color: var(--exercise-cap-bg);
@@ -117,6 +122,8 @@
 .card.exercise-editor .cm-editor {
   color: var(--exercise-main-color);
   background-color: var(--exercise-main-bg);
+  /* n * line-height + padding */
+  max-height: calc(var(--exercise-max-lines) * 1.4 * var(--bs-body-font-size) + 8px);
 }
 
 .card.exercise-editor .cm-content {
@@ -147,6 +154,17 @@
   border-right: 1px solid var(--exercise-gray);
 }
 
+.card.exercise-editor .cm-content,
+.card.exercise-editor .cm-gutter {
+  /* n * line-height + padding */
+  min-height: calc(var(--exercise-min-lines) * 1.4 * var(--bs-body-font-size) + 8px);
+}
+
+.card.exercise-editor .cm-scroller {
+  line-height: 1.4;
+  overflow: auto;
+}
+
 /* Syntax Highlighting */
 :root {
   --exercise-editor-hl-al: var(--quarto-hl-al-color, #AD0000);

live-runtime/src/editor.ts

@@ -26,6 +26,8 @@ type ExerciseOptions = EvaluateOptions & {
   localstorage: boolean;
   runbutton: boolean;
   startover: boolean;
+  'min-lines': number | undefined;
+  'max-lines': number | undefined;
 }
 
 type ExerciseButtonSpec = {
@@ -143,6 +145,13 @@ abstract class ExerciseEditor {
     });
 
     const dom = this.render();
+
+    // Set editor height restrictions
+    const minLines = String(options['min-lines'] || 0);
+    const maxLines = String(options['max-lines']) || "infinity";
+    dom.style.setProperty('--exercise-min-lines', minLines);
+    dom.style.setProperty('--exercise-max-lines', maxLines);
+
     this.container.oninput = (ev: CustomEvent) => this.onInput(ev);
     this.container.appendChild(dom);
     this.container.value = {