Topcoder Connect - Post Editor updates

Topcoder Connect is our primary customer facing platform. Messaging is an important part of the application, and it supports two modes of messaging: Status updates and Discussions. In a previous challenge we added options to edit end delete your posts.
In this challenge we’ll make improvements to the post editor like adding support for text underline, links, code snippets and images.

The post editor is implemented in RichTextArea component and most of the changes in this contest will be contained to that component. The editor area is using Draft.js - rich text area for React and the formatting bar bellow the editor is a set of custom buttons. The editor now supports bold, italic, numbered list, bulleted list and quotes.

Design assets for the icons in the formatting bar are available at https://drive.google.com/drive/folders/0B1LbmKnex41femttcVlPbVZobjA
 

Underline
This one is pretty simple, and it's supported by draft-js out of the box. Support in Discourse is not clear, but you can check if <s>, <strike> or <del> elements are supported properly.

Links
There should be two modes of adding links
1. A portion of text is selected in the editor when the link button is clicked. We'll use selected text to display the link and will show a popup to usk the user to enter the actual link. So if user selects text 'topcoder' and enters 'www.topcoder.com' as the url, topcoder link should be shown
2. Nothing is selected in the post editor when the link button is clicked. In that case, the entire line will be considered a link where link and displayed text are the same, similar to how quote option works.

Discourse will process the posts and find urls in them and display site preview for them. Try entering any facebook or topcoder link in the post editor to see it in action. There is one issue with how it works now - editing the post will include the link preview in the edit area and will lose the original url. We'd like to keep the link preview feature or implement it in the editor itself, but editing the post should still show just the original url. 

Code snippets
This one is also supported by draft-js out of the box, but make sure Discourse won't cause any issues

Images
There will be two options to include an image: by entering the image url (display a popup to enter the url) or by uploading the image to our servers.
Image upload should ideally be triggered via a drag/drop to the text area.
Our backend currently does not support file upload so we'll need to add endpoint for uploading the image files. The files themselves should be stored in discourse and the endpoint will return the direct url to the image.

 

Backend changes

The connect app will use tc-message-service for all messaging related features. The service should be easy to set up locally for development, docs are in the local directory.

You should add image upload routes in app/routes/ image upload methods in app/services/discourse.js. All the routes should validate input parameters and make sure the permissions are correct.
 

All frontend changes should be made in the connect-app repository, dev branch.

All backend changes should be made in the tc-message-service repository, dev branch.

Final Submission Guidelines