Add Python code editor to `TextInput` component if question is about Python programming

[e-caste]

Why Python

Since a couple of years, the first-year Computer Science course teaches Python instead of C, so all PoliTo students will need to run Python at least once in their lifetime. To pass this course, the students are expected to write Python code, and to do so the standard approach is to install an IDE on their personal machine, such as PyCharm or Spyder, but this requires at least a bit of technical knowledge and may cause many student-side misconfigurations that their professors will need to help solve.

Why a code editor in the browser

To avoid all the issues that this approach may cause, we want to give professors the ability to mark their uploaded exercises as requiring Python code to be solved (to implement in our custom enhanced MarkDown format, ref #97), and on these questions we want the students to see a Python code editor directly under the Question component, below the TextInput component or integrated inside it.

Possible approaches

Now, the main issue is that making the client talk to a backend which runs the client-provided Python code and then returns the result is doable (just see colab.research.google.com which runs a Jupyter Notebook) but difficult.
Since nowadays every student has a decently capable computer, we can simply run Python on it.
Enter Pyodide, a full CPython compiled to WebAssembly!
It also

makes it possible to install and run Python packages in the browser with micropip. Any pure Python package with a wheel available on PyPI is supported

!

UI

We need to present the code editor in a nice usable way. Some people have already done this:

• https://github.com/gzuidhof/starboard-notebook provides a Jupyter Notebook-like interface
• https://python.plainenglish.io/python-in-react-with-pyodide-a9c45d4d38ff is a ReactJS-compatible component which implements Pyodide

Other references

• https://github.com/pyscript/pyscript this is the project that made me curious about running Python in the browser
• https://anvil.works/blog/python-in-the-browser-talk this is the blog post which started my research

[e-caste]

Keep the TextInput component and CodeEditor separate, then allow the user to automatically paste their code from the CodeEditor into the TextInput component between ```py and ```.