The goal of this challenge is to add additional functionality to the initial editors/toolbar setup (be sure to check the source code of DraftJS page - it is a first-hand example how the standard editing operations should be implemented in DraftJS):
- Make the editing operations in the toolbar disabled when none of the related editors are focused (i.e. such operations as bold, italic, i.e., that has to be applied to a specified editor; such operations like Save do not demand an editor to be focused, because they relate to the current content of all related editors, thus should not be disabled)
- Save button should be disabled/enabled when the editors content is not / is modified (i.e. at least one of the editors in the group has modified content).
- Add support for bullet/numbered lists, code blocks, note blocks, qoute blocks, headers. Design specs for the challenge details page are provided in the forum, and they are implemented in the current version of the challenge details page. We need to provide the way to create in the editor all types of blocks you can find there (no need for H1 title, as that one is for challenge titles only and should not be used inside the specs). These block types should be switchable by a dropdown selector in the toolbar, which should match the current styling of buttons in the toolbar (especially, when you use any font style, be sure to use the mixins demoed here, when you use buttons use the standard ones; we don't have that convenent way to deal with dropdowns yet, but we have this to be used for now).
- Add support for URLs management in the text. It should work similar to URLs management in Google.Doc documents: when you select a text and press insert link, it opens a modal/dialog that accepts title and url. When you hover over a link in the text, it shows tooltip that shows the link, allows to click on it to follow it, and have the button to edit it. Note that we have generic Tooltip component in our codebase, we also have Modal component, which might be useful in this challenge, but probably in this point the Tooltip fits better.
- Add support for Image insertion. For now it will be fine to open a modal that accepts the image URL, shows it in the modal, allows to set the dimensions and insert it into the text. Once the image is in the text, hovering it should show an option to easily access the image insertion dialog to edit its properties. I don't have a clear idea, how should it look and work in the end, so use your best judgement to implement a simple, but functional way to insert the image by URL, keeping in mind that we'll want to add extra features in future (like copy/pasting the image from clipboard, uploading it from local drive, etc.). I am not sure whether it will be helpful here, but, just in case, we got this component which helps to create scalable HTML containers with the fixed sides ratio, probably it can be useful in this modal.
- Add options to highlight text / switch its color (similar to how it works in the traditional text editors).
- Markdown support. We want support Markdown format in the editor. The current idea is to have a switch in the toolbar: Markdown / WYSIWYG, which will switch between the regular and Markdown modes. In markdown mode each editor will split in two sections (vertically or horizontally - should be experimented, what is more convenient), one allowing the input, and another one showing the rendering results. Or, even, one showing and allowing to edit Markdown markup, while the other showing the rendered result and still allowing to edit it in WYSIWYG mode. Note that there are various readily available packages for Markdown support in DraftJS editor, along with examples of their use, so the goal is to choose the best tools and to add them into our setup - sure no need to write a custom converted between DraftJS state and markdown markup.