Markdown Editor
To make it easy for our users to format questions and announcements the way they want, we decided to integrate the react-draft-wysiwyg editor. This editor was built using ReactJS and DraftJS libraries. You can find it on GitHub here and you can view the documentation using this link.
This editor allows for a multitude of options that a developer can choose to implement, such as different fonts, font sizes, text alignment, etc. For our site, we hand picked the options that we thought made the most sense. The current state of these options include:
- Bold text
- Italics
- Underlined text
- Strikethrough
- Monospace typing
- Superscript
- Subscript
- Unordered lists (bullet points)
- Ordered lists (numbered)
- Indent*
- Outdent*
- Links
- Unlink
- Emojis
- Undo
- Redo
- Header Sizes
- default is Normal
- the rest go in order of decreasing size; H1 being the largest and H6 being the smallest
- Block quotes
- Code blocks
* Note: Indent and Outdent only work with lists. This is something the react-draft-wysiwyg creators are currently working to change according to this blog post.
This section covers how to make basic edits to the text in your question/announcement using the bold, italic, underline, strikethrough, monospace, subscript, and superscript options.
To bold, italicize, underline, strikethrough, or monospace your text, simply click one of the five buttons that are circled in the image below and then start typing. From left to right, these buttons are bold, italicize, underline, strikethrough, and monospace.
If you have already typed some text and decide you want to edit it further with one of these five options, all you need to do is highlight what you want to edit and then click one or more of these options.
Additionally, for bold, italics, and underlined text, you can use keyboard shortcuts to make things faster for yourself. The shortcuts are as follows:
- Bold: Ctrl+B (Windows) or Cmd+B (Mac)
- Italics: Ctrl+I (Windows) or Cmd+I (Mac)
- Underlined: Ctrl+U (Windows) or Cmd+U (Mac)
Subscript and superscript can be added to your question/announcement using the buttons circled in the image below. On the left is the button for superscript and on the right is the button for subscript. Before you click one of these buttons, type out what you want to be subscripted/superscripted. Once it's typed, highlight the desired portion and then click the appropriate button.
This section covers how to create ordered and unordered (bulleted and numbered) lists, as well as how to use the indentation that goes with them.
To create ordered and unordered lists, click one of the two buttons circled in the image below. The left is the unordered (bulleted) list and the right is the ordered (numbered) list. Pressing either of these buttons will make the entire line that you're working on part of the list item.
After pressing these buttons, if you press enter to go to the next line, the list will stay active so that it's easy to continuously add items to the list. Once you finish making your desired list, press enter to go to the next line down and re-click whichever list you have active (ordered or unordered) to disable it.
Once you've created a list of more than one item, whether that be ordered or unordered, you can then use the indent feature on all items in the list except the first. Once you've indented, if you decide you want to go back a layer you can use the outdent feature to do so. The buttons to accomplish this task are circled in the image below. On the left is the indent button and on the right is the outdent button.
Keyboard shortcuts for indenting and outdenting:
- Indenting: tab
- Outdenting: shift+tab
This section covers how to create links. In the current state of our website, unlinking doesn't have any functionality.
To create a link, click the link button that is to the right of the outdent button shown in the image from the Indentation section above. Once you click this button, a window like the one shown in the image below should pop up.
The link title is the text that will appear in the text box for your question/announcement and the link target is the actual URL you want to link to.
To use emojis in your question/announcement click on the smiley face button located to the right of the unlink button and to the left of the undo button (which is circled in the image below). After you click the button, a popup window with the different emoji options should open up like the one shown in the image below. From here, simply select the emoji you want to use and it will automatically place it in the text box for you.
To undo or redo something you typed, click the appropriate curved arrow buttons circled in the image below. On the left is the undo button and on the right is the redo button. Undo is used to take away something you just typed and redo is used to put what you just undid back into the text box.
The keyboard shortcut for undoing something is Ctrl+Z (Windows) or Cmd+Z (Mac).
There are six different header types you can use: H1, H2, H3, H4, H5, and H6. The lower the number, the larger the size of the text will be. For example, H1 text will be the largest of the six headers and H6 text will be the smallest. This is shown in the example image below.
To use these different headers, click the dropdown located at the far right of the toolbar in the editor. From here you should see all of the options from H1 to H6 (circled in the image above), as well as a couple more options that will be discussed in the next section. Clicking one of these six header options will make the entire line you're working on become a header.
To disable the header and turn it back into normal text simply click the Normal option located at the top of the dropdown menu (above the red circle in the image above) or use the undo button as discussed in the Undo and Redo section.
You can find the options to create block quotes and code blocks at the bottom of the dropdown menu located on the far right of the toolbar. This is shown in the image below.
To create a block quote or code block with multiple lines, use shift+enter to stay inside the block quote/code block.
To undo the block quote or code block, click the Normal option located at the top of the dropdown menu or use the undo button as discussed in the Undo and Redo section.