Rework resizing of the problem editor.

[drgrice1]

The code and rendering panels are now not only vertically resizable, but are horizontally resizable when the window with is at or above the large breakpoint (992 pixels).

Furthermore, resizing does not work with the native browser resize via the css resize property. Instead it is controlled with JavaScript. The resize grips (which are much more visible now) can be also be focused with the keyboard and when focused the arrow keys can be used to resize the code and render panels. Note that if Ctrl is pressed with an arrow key a 1 pixel resize occurs, and if Alt is pressed with an arrow key a 50 pixel resize occurs. Without a modifier key the arrow keys perform a 20 pixel resize.

In addition, the dimensions are saved to local storage and persist when the page reloads. Unfortunately there will be some flickering of content as the resize occurs after the page loads.

Note that the css resize property is actually not supported in all browsers, so this actually makes resizing work for those browsers as well. The browsers that do not support the css resize property include Firefox for Android, and Safari on IOS. Yeah, those are for mobile devices, and who edits problems on a mobile device? In any case, this makes the resize grips more evident. The native resize grip is rather small in the lower right corner of the CodeMirror editor panel, and many probably don't even know it is there.

Note that the code panel has a minmimum width of 400 pixels, and the rendering panel a minimum width of 300 pixels. This works out so that when the window size is 992 pixels the two panels can't really be resized much or at all (when the site navigation menu width of 250 pixels is taken into account) depending on the browser. But at larger window widths resizing can be done.

I thought about making it so that the resizing could go all the way to the right and the rendering panel be resized to a width of 0, but decided against it. If that were done, then the rendering would still be occuring even though you can't see it, and that doesn't seem good. I think that this should at least alleviate the request(s) to hide the rendering panel (which I don't think is really a good idea).

[somiaj]

Works and looks good. Just some thoughts.

Should the double click and modifier information about adjusting resize behavior be added to the page help?

I felt the dark grey highlight when hovering over the resize bars a git strong, would a lighter grey highlight more in line with other greys on the page be reasonable here?

[drgrice1]

I made the hover color a little lighter, and added comments in the help about resizing.

[Alex-Jordan]

On a Mac, I need to use the option key instead of Alt to get the big 50 pixel adjustments. And I need to use control+option to get the small 1 pixel adjustments. Reading that Ctrl can be used for this, one might think the Mac control button would work, but it does not (at least not all by itself).

Now that I look, I'm confused by the Mac alternative column in the help. There are mentions to Alt and while I would guess option for that, I'm not really sure what Alt means for a Mac. But also, that column tells me Cmd-Shift-[ should work to fold a foldable region. But nothing I try works. In firefox, control-shoft-[ moves me to the next tab in the browser. Other attempts to combine shift-[ with subsets of fn, control, option, and command just don't work for me. This is all separate fro this PR of course, but I noticed it while reviewing this PR.

[drgrice1]

The keymaps were taken from what was documented for Codemirror 6 at the time this was written. That may have changed or there was a mistake at that time. Currently they show:

Ctrl-Shift-[ (Cmd-Alt-[ on macOS): foldCode
Ctrl-Shift-] (Cmd-Alt-] on macOS): unfoldCode
Ctrl-Alt-[: foldAll
Ctrl-Alt-]: unfoldAll

I noticed our help shows Cmd-Alt-] for folding all for non macOS which is clearly wrong. That should be Ctrl-Alt-]. It seems that is what it should be for all operating systems. Although, it may be that the default keymaps don't work on macOS also.

[drgrice1]

It seems that Alt means Option for Mac. I don't know why the CodeMirror documentation calls it Alt when there is no actual Alt key on a Mac keyboard (as I understand it).

[drgrice1]

I suspect that the reason for the Alt key documentation is that in terms of the code and javascript events, it is the altKeymodifier on the event object that is used for the option key on macOS.

[drgrice1]

It is odd that you need to use control+option to get the one pixel adjustment. In the code this is determined by if the event ctrlKey modifier is set. As I understand it that is if the control key is pressed on macOS.

[drgrice1]

I changed the keybindings in the help. Perhaps these are more accurate?