Improve the review comment editor/renderer

[ggwadera]

Our current markdown editor when adding a comment leaves a lot to be desired. The review experience could be a lot better by improving the editor. Sometimes I have to open VS Code just to type a more lengthy review that sometimes include code blocks.

The actual editor is just a textarea tag with monospaced font, so it's not a very smart editor.

c0d3-app/components/MdInput.tsx

Lines 44 to 50 in a2228df

	<textarea
	value={value}
	onChange={handleChange}
	placeholder={placeHolder}
	style={textBoxStyle}
	data-testid="textbox"
	/>

Here's some things that could be improved.

• Code highlighting in the preview and comment view.
• Text area being reset when switching between write and preview (Input resets dimensions to default after switching to preview and back #869)
• More explicit markdown formatting options. Many students don't know markdown syntax and having buttons to add a heading, lists, or code, could be helpful. Look at the github editor for inspiration.
• Add some smart behaviors, like adding surrounding quotes (or braces, parenthesis, whatever) when you have part of the text selected, instead of just replacing it with only the opening character.

These could all be coded into our current components, or also through a new npm dependency. I'll leave this choice to the developer that wants to implement this.

[tomrule007]

I agree a lot could be improved here. The switching between write and preview resizing was driving me nuts.

It might be the best to go with a prebuilt option like this facebook package draft-js https://github.com/facebook/draft-js

[songz]

Closing because we rolled out a spanking awesome editor! #1010