Add a toolbar.

[drgrice1]

This make the toolbar from the PG mqeditor an internal toolbar for the library. This makes some things cleaner. In particular, all of the options that were added to make the toolbar work externally are no longer needed (blurWithCursor, textFieldEnter, and textFieldExit) and were removed. The things those options were used for can be dealt with internally. Note that Bootstrap need to be loaded in the page since the toolbar uses Bootstrap tooltips, popovers, and buttons.

Also the following screen reader issues that were fixed.

• The result of typing an auto command was not being voiced.
• If a toolbar button that inserts a LaTeX command is used its result was not voiced.
• When a select occurs clear the textarea value in the next tick after setting it and selecting the textarea contents. This prevents screen readers from announcing its contents in the case that selection occurs when the input is focused.

Also remove the browser highlight styles for selections. The browser styles conflict with the other styles in some browsers and don't look good. (I noticed that this was done in the Desmos code as well.)

Convert less to scss. This is just something I have been wanting to do for a while. I like Dart Sass and scss so much better than less. It is the more popular library, and is generally more versatile.

Also add links to all testing pages on the index page of the developement server. The README.md says they are there.

[somiaj]

Just some things I've noticed, not directly related to this PR though.

In demo.html, the example to put math between $ has a trailing $ in the MathQuill input. Also seems there are extra $ in the visual tests page too in the math quill inputs.

Should the subscript/superscript button create a box for base and subscript or superscript if there is no input? This isn't new behavior, but I know some inputs would put boxes in place.

[somiaj]

I wanted to test positing of the menu for inputs in the middle of a page, but the option to enable/disable menu is not present on either the demo or visual test inputs.

[drgrice1]

In demo.html, the example to put math between $ has a trailing $ in the MathQuill input. Also seems there are extra $ in the visual tests page too in the math quill inputs.

Those have always been that way. Those use the TextField instead of the EditableField, and the TextField has never really worked right, and was never really fully developed.

Should the subscript/superscript button create a box for base and subscript or superscript if there is no input? This isn't new behavior, but I know some inputs would put boxes in place.

I don't know what you really mean with this?

[drgrice1]

The toolbar is only enabled on the inputs-test.html page.

[drgrice1]

For testing an input in the middle, test this with PG. I gave instructions for doing so in openwebwork/pg#1417.

[somiaj]

Should the subscript/superscript button create a box for base and subscript or superscript if there is no input? This isn't new behavior, but I know some inputs would put boxes in place.

I don't know what you really mean with this?

Maybe the buttons can still work if there is no input, entering a ^ or _ works without any input. And if you leave the superscript or subscript an empty blue box is left to signify there is an empty location. I don't use the toolbar, so I am not use to it, but I was surprised when I hit the superscript or subscript button and they did nothing when there was no input. I do know other inputs I've used, like WebAssign, will still create the input for a superscript or subscript if the button is hit with no input.

What I was expecting to happen was when that button was hit with no input, putting the cursor in the superscript or subscript location and then an empty blue box in the base to signify it was missing / needed to be filled in.

[somiaj]

Checking what WebAssign does, it doesn't ever put an 'empty box' in the base, but will input the _ or ^ if the button is pressed without any input.

Again, not part of this PR, and I don't really use the toolbar, just something I noticed that was different from other toolbars I've seen.

[drgrice1]

I see what you mean. The behavior is what we decided on. Note that if you uncheck the supSubsRequireOperand option (which is enabled for PG), then you get something like what you are asking, except there is no box. I am not sure that what you are asking could even be implemented for MathQuill. It would require reworking SubSubs rather heavily to create a block for the base. Not worth the effort.

[somiaj]

This works for me in testing npm run serve. I am going to take @Alex-Jordan approval on openwebwork/pg#1417 as a secondary approval.

Should I just merge? I haven't fully tested the PG integration, but don't have time to setup a local link at the moment.

[drgrice1]

Yeah, I think that should be fine since openwebwork/pg#1417 and this pull request are so tightly bound.