Topcoder Connect - DraftJs link plugin

Create a plugin for DraftJs editor which replicates Google Docs functionality for editing links.

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 want to improve the editing links experience by replacing the current link plugin with the functionality similar to Google Docs (editing links).

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.

Main functionality

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

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

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

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

5. We can select any text in post and click “Link” button on the toolbar which we already have. This should show the big popover:
   
   - text field should be prepopulated with the selected text, and URL should be empty with a placeholder
   - cursor should be put in the “Link” input in this case
   - we should also support a hotkey “Ctrl+K”/”Cmd+K” which will call the same action (showing this popover)
   - 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)
   - 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)

Additional functionality

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:

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

UI

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

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

• 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

• 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.

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

• 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.

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

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

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

• Lint should pass

• Existent unit tests should pass

Final Submission Guidelines

• Patch to the dev branch of Connect App