Highlight consumed batch input

[winniederidder]

This PR adds support for highlighting the lines that have been consumed in batch mode.
A div element with contenteditable=true has some undesirable default behaviour that is very clunky and error-prone to work with (first child is a TextNode before using divs, replacing that TextNode with a div causes new elements to appear, ...) so I decided to stop using it. Instead, CodeMirror already provides an editor with plenty of flexiblity and a useful API. This editor can then share some code with the CodeEditor-class.

To provide actual highlighting and gutters, I added new classes. The Gutters base class allows creating arbitrary gutters (such as the checkmark gutter, but also a breakpoint gutter (useful for #109)). To prevent code duplication in the BatchInputEditor, I created a base class grouping similar functionality between the input and the code editor together. I also used the CodeMirror theme extension to properly fix the layout of the editor is always correct.

The highlight-style is still up for debate. I currently use the built-in CodeMirror activeLine classes.

Closes #82
Depends on #195 (to be able to use cleaned version of onChange in the new Editor base class)

[winniederidder]

Example of current styling with both a checkmark gutter and a highlighted line.
Thoughts @pdawyndt @bmesuere ? Do we want the gutter, the highlights, both, ...?

[pdawyndt]

@winniederidder: can you deploy on /dev? Would help to see it in action

[winniederidder]

@winniederidder: can you deploy on /dev? Would help to see it in action

Branch is being deployed, should be available in a minute or two.

[pdawyndt]

I get a blinking cursor that spans across two lines

and a dotted margin to the left and right of the input field

I would like to see a version that uses the gutter, as it seems valuable to have a tooltip somehow. Maybe also no background color change, but just grey out the consumed lines?

[winniederidder]

I get a blinking cursor that spans across two lines

and a dotted margin to the left and right of the input field

I would like to see a version that uses the gutter, as it seems valuable to have a tooltip somehow. Maybe also no background color change, but just grey out the consumed lines?

Seems I forgot to push, so the version you are using is not the one I used to make the screenshot with.
As far as the blinking cursor, this is because the placeholder spans two lines and the CodeMirror placeholder doesn't handle that very well. Maybe we can use a shorter piece of text if we don't want the two-line spanning.

[pdawyndt]

One other observation: after initial load, the code editor has a narrow gutter

and after a few seconds is given a broader gutter (probably after linting has become active)

This seems unwanted UI-behaviour.

[winniederidder]

One other observation: after initial load, the code editor has a narrow gutter

and after a few seconds is given a broader gutter (probably after linting has become active)

This seems unwanted UI-behaviour.

This is indeed linting becoming active when a lintSource is provided. Currently, the gutters are absent until linting is possible, but I can add them by default again if this is unwanted behaviour.

[pdawyndt]

Unwanted behaviour according to me.

[pdawyndt]

Input field gutter doesn’t span entire height if height of input field increases.

[pdawyndt]

Also check UI in dark mode

[pdawyndt]

LGTM

Papyros.-.Google.Chrome.2022-05-27.10-39-33.mp4

[pdawyndt]

If the goal was to make consumed input read-only, this still doesn't work. I can still edit lines after they have been consumed.

[winniederidder]

If the goal was to make consumed input read-only, this still doesn't work. I can still edit lines after they have been consumed.

Currently, these are indeed not made read-only. This might indeed be something that we want.

[winniederidder]

If the goal was to make consumed input read-only, this still doesn't work. I can still edit lines after they have been consumed.

I have now also added support to making consumed lines read-only while the run is happening.

[pdawyndt]

We might add the prompt that was used when a line of input was consumed, to the tooltip of the icon (check mark) in the gutter of the input field. This way, students can inspect which line was consumed by which prompt.

Extension: if the same prompt is used more than once in the same run, we could add a number indicating what instance of the prompt we refer to (e.g. “What is your name? (3)” = third instance).

[winniederidder]

We might add the prompt that was used when a line of input was consumed, to the tooltip of the icon (check mark) in the gutter of the input field. This way, students can inspect which line was consumed by which prompt.

Extension: if the same prompt is used more than once in the same run, we could add a number indicating what instance of the prompt we refer to (e.g. “What is your name? (3)” = third instance).

It already shows the prompt, if there was one. Adding a number to duplicate prompts sounds like overly complicating things, as I don't think prompts will often have the same question (unless empty, but then it also doesn't serve a purpose to number it).