[Enhanced code blocks] Make console prompts unselectable

[seshrs]

Context

In #169 (comment), @eecs441staff suggested skipping prompts and output when using click+drag while selecting multiple lines in a console prompt. At the time, I thought it would not be easy to implement given the limitations of the JS text selection API.

I feel a bit silly in retrospect for forgetting to consider the CSS user-select property 😅

This PR proposes making the console prompts in enhanced console code blocks completely unselectable (by clicking line numbers or by selecting text the old-fashioned way).

Demo

Visit the demo URL, and click+drag on the line numbers in the console code block.

Demo URL: https://preview.sesh.rs/previews/eecs485staff/primer-spec/177/demo/enhanced-code-blocks.html#console-example

Screen recording:

Screen.Recording.2022-04-23.at.4.53.52.PM.mov

Open question: Should we make console output unselectable?

It's extremely easy to skip the console output too. However, I wonder if students might find it confusing that they have no way to select the console output. Then again, would students ever need to be able to select the output?

CC @awdeorio, @sugihjamin in case you have strong opinions 😃

[github-actions]

The spec from this PR is available at https://preview.sesh.rs/previews/eecs485staff/primer-spec/177/.

^{(Available until Mon May 23 2022.)}

[eecsreactive]

It seems to me that there should be a way to copy everything as per "normal" behavior. One could select and copy everything if shift is held down or by clicking the copy to clipboard icon?

[seshrs]

Unfortunately, the user-select property hijacks normal selection behavior. And unfortunately, the better solution is the one I mentioned in my comment, but is only supported on Firefox 😞

It is possible to change the user-select property dynamically (like when holding the shift key), but we’d want to tell students about this feature. Maybe I should only merge this after we have a good resolution for #172…