feat: Add option to set height of Pyodide/Ace editors

This change also allows the editor to shrink and grow as users type.

Issue-41: #41
Co-authored-by: Jayant <[email protected]>
Co-authored-by: Timothée Mazzucotelli <[email protected]>

Author: 3 people

docs/usage/pyodide.md

@@ -45,6 +45,56 @@ print("Hello.")
 
 NOTE: **All Pyodide blocks on the same page should use the same version!**
 
+## Editor height
+
+The height of the editor can be configured with the `height` option. It accepts the following values:
+
+- `0` or `auto`: A fixed number of lines, based on initial code.
+- a positive number, like `10`: A fixed number of lines.
+- a positive range, like `5-30`: The minimum and maximum number of lines. The editor will shring/grow as you type.
+
+The default is `auto`.
+
+A few examples:
+
+````md exec="1" source="tabbed-left" tabs="Markdown|Rendered" title="Fixed height (10 lines)"
+```pyodide height="10"
+from typing import Iterator
+
+# This is an example
+class Math:
+    @staticmethod
+    def fib(n: int) -> Iterator[int]:
+        """Fibonacci series up to n."""
+        a, b = 0, 1
+        while a < n:
+            yield a
+            a, b = b, a + b
+
+result = sum(Math.fib(42))
+print(f"The answer is {result}")
+```
+````
+
+````md exec="1" source="tabbed-left" tabs="Markdown|Rendered" title="Between 1 and 40 lines"
+```pyodide height="1-40"
+from typing import Iterator
+
+# This is an example
+class Math:
+    @staticmethod
+    def fib(n: int) -> Iterator[int]:
+        """Fibonacci series up to n."""
+        a, b = 0, 1
+        while a < n:
+            yield a
+            a, b = b, a + b
+
+result = sum(Math.fib(42))
+print(f"The answer is {result}")
+```
+````
+
 ## Sessions
 
 Editors with the same session share the same `globals()` dictionary,

src/markdown_exec/_internal/formatters/pyodide.py

@@ -37,17 +37,42 @@
 
 <script>
 document.addEventListener('DOMContentLoaded', (event) => {
-    setupPyodide('%(id_prefix)s', install=%(install)s, themeLight='%(theme_light)s', themeDark='%(theme_dark)s', session='%(session)s');
+    setupPyodide(
+        '%(id_prefix)s',
+        install=%(install)s,
+        themeLight='%(theme_light)s',
+        themeDark='%(theme_dark)s',
+        session='%(session)s',
+        minLines=%(min_lines)s,
+        maxLines=%(max_lines)s,
+    );
 });
 </script>
 """
 
 _counter = 0
 
 
+def _calculate_height(code: str, extra: dict) -> tuple[int, int]:
+    """Calculate height configuration for the Pyodide editor."""
+    height = extra.pop("height", "auto")
+
+    if height in ("auto", "0"):
+        min_lines = max_lines = len(code.strip().splitlines()) if code.strip() else 5
+    elif "-" in height:
+        min_lines, max_lines = height.split("-")
+        min_lines = max(1, int(min_lines or "5"))
+        max_lines = max(min_lines, int(max_lines or "30"))
+    else:
+        min_lines = max_lines = int(height)
+
+    return min_lines, max_lines
+
+
 def _format_pyodide(code: str, md: Markdown, session: str, extra: dict, **options: Any) -> str:  # noqa: ARG001
     global _counter  # noqa: PLW0603
     _counter += 1
+
     version = extra.pop("version", "0.26.4").lstrip("v")
     install = extra.pop("install", "")
     install = install.split(",") if install else []
@@ -56,6 +81,7 @@ def _format_pyodide(code: str, md: Markdown, session: str, extra: dict, **option
     if "," not in theme:
         theme = f"{theme},{theme}"
     theme_light, theme_dark = theme.split(",")
+    min_lines, max_lines = _calculate_height(code, extra)
 
     data = {
         "id_prefix": f"exec-{_counter}--",
@@ -66,6 +92,8 @@ def _format_pyodide(code: str, md: Markdown, session: str, extra: dict, **option
         "session": session or "default",
         "play_emoji": _play_emoji,
         "clear_emoji": _clear_emoji,
+        "min_lines": min_lines,
+        "max_lines": max_lines,
     }
     rendered = _template % data
     if exclude_assets:

src/markdown_exec/assets/pyodide.css

@@ -13,8 +13,6 @@ html[data-theme="dark"] {
 
 .pyodide-editor {
     width: 100%;
-    min-height: 200px;
-    max-height: 400px;
     font-size: .85em;
 }
 

src/markdown_exec/assets/pyodide.js

@@ -77,7 +77,15 @@ function updateTheme(editor, light, dark) {
     });
 }
 
-async function setupPyodide(idPrefix, install = null, themeLight = 'tomorrow', themeDark = 'tomorrow_night', session = null) {
+async function setupPyodide(
+    idPrefix,
+    install = null,
+    themeLight = 'tomorrow',
+    themeDark = 'tomorrow_night',
+    session = null,
+    minLines = 5,
+    maxLines = 30,
+) {
     const editor = ace.edit(idPrefix + "editor");
     const run = document.getElementById(idPrefix + "run");
     const clear = document.getElementById(idPrefix + "clear");
@@ -88,6 +96,12 @@ async function setupPyodide(idPrefix, install = null, themeLight = 'tomorrow', t
     editor.session.setMode("ace/mode/python");
     setTheme(editor, getTheme(), themeLight, themeDark);
 
+    editor.setOption("minLines", minLines);
+    editor.setOption("maxLines", maxLines);
+
+    // Force editor to resize after setting options
+    editor.resize();
+
     writeOutput(output, "Initializing...");
     let pyodide = await pyodidePromise;
     if (install && install.length) {