POC: Markdown shortcut buttons

What does this MR do?

Adds markdown shortcut buttons to text area for comments.

Are there points in the code the reviewer needs to double check?

Because changing textarea.val('something') kills the natural browser undo stack, I had to implement a custom undo stack using state. You can't use the "undoable" state undo pattern because you need to go back to a previous state regardless of cursor position. The undo also adds an undo history item once you delete stuff or press enter.

You can also edit multiple textareas at once and it will keep an undo history for each textarea individually, so the undo state should not collide between textareas.

Why was this MR needed?

It has been requested multiple times and the competition has it. https://gitlab.com/gitlab-org/gitlab-ce/issues/17185#note_12073433

Libraries are available that already implement this functionality but they are enormous and bloaty. I implemented this in very few lines of code and kept it very simple and as minimal as possible. This was also some competitions approach. I believe so as to not include too much JS.

Adding extra buttons with new functionality should only need new HTML and no new JS.

Only extra complex thing was adding a overridden undo stack, which was made as simple as possible as well.

What are the relevant issue numbers?

https://gitlab.com/gitlab-org/gitlab-ce/issues/17185#note_12073433

Screenshots (if relevant)

NOTE: One thing you cannot see in this screenshot is that I am pressing CmdZ to undo and CmdShiftZ to redo which is the undo/redo stack I implemented. CtrlY also works for redo.

cc @dzaporozhets for UI

cc @iamphill @alfredo1 for JS review

cc @JobV if you like the idea.

Fixes: #17185 (closed)

Added 1 commit:

• 49e7c9a2 - Overwrite undo history

Added 1 commit:

• 1d0e0781 - Add redo state

Added 1 commit:

• 2148768d - Add undo history once they click the enter or backspace key

Added 1 commit:

• 2d99a180 - Remove console.log

Unmarked this merge request as a Work In Progress

Added 1 commit:

• 46b4a38f - No need to add bold for the class selector for removing events

Added 1 commit:

• 419fbf84 - Proper class jquery selector for off.

@jschatz1 love it. Isn't the formatting on the bottom a bit unnatural? It looks good, but that was my first thought. Also, very impressed with your reimplementation of the undo stack.

Added 1 commit:

• 3fae4775 - Fix syntax error. Remove whitespace

Added 10 commits:

• 6447cef0 - Initial markdown ez buttons
• ac43f845 - Overwrite undo history
• 9d59c43e - Add redo state
• 3eac900a - Add undo history once they click the enter or backspace key
• b8041940 - Remove console.log
• b422603b - No need to add bold for the class selector for removing events
• 1bf31ba5 - Proper class jquery selector for off.
• 7f3cc2f4 - Fix syntax error. Remove whitespace
• 3864a6de - Revert _form file
• 6c96210e - Merge branch 'tmp' into markdowner

@jschatz1 about UI: how about put formatting buttons on top right. and make Go full screen a button too.

Love it. I'll do that

Added 1 commit:

• 5ff686cd - Move buttons to upper right.

@dzaporozhets Moved buttons to top right. Added full screen and mobile views. Also added more formatting buttons.

Reassigned to @dzaporozhets

Added 1 commit:

• 193c4a07 - Fix spec issue

Reassigned to @jschatz1

Added 1 commit:

• db26728f - Make tests pass.

Reassigned to @dzaporozhets

@dzaporozhets Builds passed! I moved the buttons. Let me know if you have any other feedback!