Markdown formatting toolbar for rich text fields.

Review Request #11004 — Created May 16, 2020 and updated

hxqlin
Review Board
master
4f57506...
reviewboard

This patch adds a markdown formatting toolbar for rich text editors.
The formatting-related buttons add the corresponding syntax to the
selection if one exists, or just inserts the syntax and positions
the cursor. This applies to the bold, italic, strikethrough, ordered
and unordered list, and code buttons. If the selection begins and ends
with the same syntax as the button being pressed, the syntax is removed.
For example, if the bold button is pressed and the selection is already
bolded, the bold syntax is removed.

For the insert link button, if there is a selection, the selection
becomes the text to display for the url. Otherwise, it inserts syntax
for a link with a text to display placeholder. For the upload image
button, it opens a dialog to upload an image. A reference to the image
is added to the editor.

Manual testing only so far.

Loading file attachments...

Description From Last Updated

Col: 36 Functions declared within loops referencing an outer scoped variable may lead to confusing semantics. ($, _)

reviewbotreviewbot

This bit looks a bit weird; it's for the upload image button, which is different from the other buttons because ...

hxqlinhxqlin

The button that toggles the rich text attribute is a bit tangled up in inlineEditorView so I wasn't sure how ...

hxqlinhxqlin

Col: 36 Functions declared within loops referencing an outer scoped variable may lead to confusing semantics. ($, _)

reviewbotreviewbot

Col: 36 Functions declared within loops referencing an outer scoped variable may lead to confusing semantics. ($, _)

reviewbotreviewbot
Checks run (1 failed, 1 succeeded)
flake8 passed.
JSHint failed.

JSHint

hxqlin
  1. This doesn't quite have everything from the project description just yet. I'm not sure if the current implementation is easily open to modification by extensions though so I thought I'd just put up an initial review request to see if there's something big.

  2. This bit looks a bit weird; it's for the upload image button, which is different from the other buttons because it's an input hidden in a label. It needs the _uploadImage function from RB.TextEditorView but also needs access to the input element to get the file. There must be a nicer way to do it but I'm not sure how.

    1. How about registering .rb-c-formatting-toolbar__image-btn change in events: {...} to _onFileUploadChanged, and having the event handler logic there? That'd keep this code generic.

  3. 
      
hxqlin
Review request changed

Change Summary:

Change the markdown checkbox to a button that toggles markdown in the field when clicked.

Commit:

-8d2d3792ceaaaae09015e69fd4101ae426c8ad84
+057181aa978c1126ce8f7a75a71f0997ce0825b5

Diff:

Revision 2 (+462 -8)

Show changes

Checks run (1 failed, 1 succeeded)

flake8 passed.
JSHint failed.

JSHint

hxqlin
  1. 
      
  2. The button that toggles the rich text attribute is a bit tangled up in inlineEditorView so I wasn't sure how to pull it out to display on the right hand side of the text field where I think it'd also look better in line with the rest of the buttons in the toolbar.

    1. Sorry I haven't gotten back to you. There are ways we can lay this out to address this. Feel free to ping me on Slack and we'll talk about it! :)

  3. 
      
hxqlin
hxqlin
Review request changed

Change Summary:

Revert attempts to change the Enable Markdown checkbox to a button and add a more robust implementation for toggling list syntax.

Commit:

-057181aa978c1126ce8f7a75a71f0997ce0825b5
+4f57506f709277300f195691732553dea3d26cd0

Diff:

Revision 3 (+510 -2)

Show changes

Checks run (1 failed, 1 succeeded)

flake8 passed.
JSHint failed.

JSHint

Loading...