primer-spec
primer-spec copied to clipboard
[Enhanced code blocks] Make console prompts unselectable
Context
In https://github.com/eecs485staff/primer-spec/issues/169#issuecomment-1100118222, @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:
https://user-images.githubusercontent.com/12139762/164949896-0b7202fe-a8af-4497-a5b2-22a984edf825.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 😃
The spec from this PR is available at https://preview.sesh.rs/previews/eecs485staff/primer-spec/177/.
(Available until Mon May 23 2022.)
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?
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…