Project Twenty One: Rich Text

World Wide Web grew out of a need to link documents between each other: many implementations of hypertext eventually resulted in the invention of hypertext protocol and from there there was no stopping it. But links aren't the only feature of rich text: modern day HTML can include anything from bold font to embedded media and beyond.

Rendering HTML is easy as long as you have a browser at hand - but allowing users to create markup with a visual editor is a challenge. Exactly the challenge I think we could take on today.

Rich Text Editor: requirements and recipe

As a user I want to be able to enter plain text and turn into into rich text with the help of easy to use UI, so that I can create engaging content quickly

For inspiration this is the editor I'm looking at right now:

Dev.to, GitHub and plenty other services are relying on markdown, while other editors are tailored specifically for HTML content - which is somewhat harder to implement, but easier to render.

It's up to you what kind of road you'd like to take, as long as requirements are met:

Requirements

1. User should be able to enter plain text
2. User should be able to turn text into hyperlinks, headers, paragraphs, lists, bold and italic
3. UI should be keyboard accessible
4. User should be able to preview text they entered

Recipe

1. Start with the mobile layout for the UI
2. Implement ability to e.g. make selected text bold
3. In a similar way implement italics & links
4. Implement ability to create e.g. headlines
5. Following similar approach implement other "blocks": paragraphs and lists
6. Implement preview functionality (or add ability to render content in the editor right away)
7. Write a nicely formatted ode to yourself!

Hints

HTML5 includes a useful contenteditable property that would allow you to make content of an html block editable as the name suggests. You might want to use it if you're implementing HTML editor.

There is a window.getSelection method that provides access to the text that is currently selected. You can use it to "wrap" selected text with an HTML element or markdown.

Hard Mode: Drag & Drop

Rich text looks quite poor without images at least, wouldn't you say? Not to mention that truly engaging pages often use buttons, forms, animated elements and bunch of other things.

Do you think you could that ability to your awesome editor and let user drag and drop images or whole blocks?

Share your creations and feedback and see you tomorrow!

Liked the idea a lot and would love to have it all year long?