Topcoder Connect - DraftJs link plugin (repost)

Create a plugin for DraftJs editor which replicates Google Docs functionality for editing links and encourage users to add link titles.

This is a repost of the challenge https://www.topcoder.com/challenges/30088842?tab=details. We increased prize from $800/$400 to $1200/$600 and also marked the requirements as [moor] and [minor] to know where to put the most of efforts and make scoring criteria more clear. Also, this challenge has extended submission time to 7 days, so you may have more time for familiarise yourself with DraftJs API.

Project Background

Topcode Connect is client facing application of Topcoder. Customer use Topcoder Connect to input requirements of their projects, then managers and copilots take it from there.

In the Connect App we have the ability to create posts. Technically we use DraftJs editor with several plugins for text styling and editing links. We are working on a new feature, which would extract the links from the posts and list them on the sidebar. To make this liest more meaningful we want to encourage users to add titles to the links.
To achieve this we would replace the current link editor with the functionality similar to Google Docs (editing links) and add show automatic popup to add a link title.

Technology Stack

• React

• Redux

• CSS Modules

• DraftJs

Code access

The work for this challenge has to be done in one repository:

- Connect App repo https://github.com/appirio-tech/connect-app dev branch

- User for testing is provided on the forum.

Individual requirements

We have to create a DraftJs plugin which will replicate the functionality of Google Docs functionality for editing links with a few changes.

General functionality

1. [major] As soon as we type or paste URL (and entered one more non-URL character) it should become a link.

2. [major] If we put the cursor on the link we should show popover.
   -  [minor] if the link is defined as URL and doesn’t have text, instead of button “Change” we name it “Add title”
   
   - [minor] if the link has text, we call button “Change”:
   
   - [major] this small popover would be closed if put cursor outside the link

3. [major] Clicking “Remove” should remove link, so it becomes a simple text.

4. [major] Clicking “Change”/”Add title” button should open bigger popover:
   
   - [minor] the whole link should be automatically highlighted in the text (it’s not real selection, more like highlighting)
   - [minor] the “Text” input in the popover should be automatically selected (in Google Docs they select “Link” input)
   - [major] clicking “Apply” will update text and URL of the link and close popover (we can also hit <Enter> [keyboard control is minor requirement])
   - [major] we can close this popover without any changes by clicking outside of it, or <ESC> [keyboard control is minor requirement]

5. [major] We can select any text in post and click “Link” button on the toolbar which we already have. This should show the big popover:
   
   - [major] text field should be prepopulated with the selected text, and URL should be empty with a placeholder
   - [minor] cursor should be put in the “Link” input in this case
   - [minor] we should also support a hotkey “Ctrl+K”/”Cmd+K” which will call the same action (showing this popover)
   - [minor] we can show this popover when we have a link (not a text) under the cursor (link may be selected or cursor can be just on link)
   - [minor] if we didn’t selected any text and called this action, it’s ok to keep this function disabled or it can work like in Google Docs (check it there)

Autopopup functionality

Note, this feature is main aim of this challenge and this is the main reason why we are rebuilding link editor. Not implementing this feature means that submission shouldn’t pass the review.

We would like to encourage users to define texts for links, not only insert URLs. This is because we will list links from all the posts on the sidebar and we would links to have some text as a description.
For this purpose we would slightly improve step 2 in the functionality above.
As soon user finished entering/pasting link and typed one more non-URL character in step 2 we are implementing that text automatically becomes a link. Additionally we should automatically show a small popover for the link which just has been created:

- [major] so as soon as user created a link we propose to “Add title”
- [major] this popover may be closed by clicking outside of it or putting cursor on other link
- [minor] make this feature optional, so we can easily enable or disable it using some configuration.

UI

• [minor] Follow the UI like in Google Docs but implement it following the styles of Connect App

• [minor] User fonts, buttons, round corner, shadows which we use in Connect App

• [minor] Don’t hardcode color values in the SCSS, use only colors variables https://github.com/appirio-tech/tc-ui/blob/feature/connectv2/src/styles/_variables.scss

• Mobile devices are out of scope as we don’t use DraftJs editor on mobile.

Notes

• Google Docs may show links suggestions https://monosnap.com/file/ABDxuJf47GuC63maM4aMZra2djb2Hw - we don’t need this functionality.

• If you have any concerns how some particular thing should work you can follow the way it’s done in Google Docs or raise a question on the forum.

• You can refer to the implementation of Anchor, Linkify plugins. Demo here https://www.draft-js-plugins.com/.

General requirements

• [major] The format links are stored now should stay. It means that if there are any links were created previously the new link editing functionality should support them.

• [major] Remove the plugin which we use at the moment “draft-js-link-plugin”.

• [minor] If you need to implement positioning of popovers you can use the react-popper library as it has great positioning functionality and we use for implementing tooltips in react-components. Alternatively you can write a custom code if positioning is simple.

• [minor] Keep all the files related to this DraftJs plugin separately, so we can potentially reuse it in other projects.

• [minor] Create a separate reusable components for the UI elements you would create for new editor like popovers.

• [minor] Avoid creating nested styles in SCSS. As we use CSS Modules we can have a flat structure of classes in SCSS files.

• [minor] Lint should pass

• [minor] Existent unit tests should pass

Final Submission Guidelines

• Patch to the dev branch of Connect App