31 / 31

Build a rich text toolbar

HardP3Build

Build a rich text toolbar for a contenteditable area, supporting bold, italic and links, with the toolbar buttons reflecting the current selection.

Time box: 60 to 75 minutes.

Requirements

0 / 6

A contenteditable region and a toolbar with Bold, Italic, Underline, Link and Remove link buttons
Buttons apply formatting to the current selection, and clicking them does not lose the selection or the focus in the editor (use mousedown with preventDefault or focus handling)
Active states (pressed look and aria-pressed) update on the selectionchange event according to the formatting at the caret or in the selection
The Link button asks for a URL, validates the protocol (allows http:, https: and mailto:, rejects javascript:), and wraps the selected text in an anchor
Keyboard shortcuts Ctrl or Cmd plus B, I and U work, and Enter and paste behave sensibly (paste as plain text)
A function returns the editor content as sanitised HTML, which strips unexpected tags and attributes

0 / 3

Only after every requirement works.

Your files are saved in this browser as you type.

When every requirement works, mark it complete to count it as solved.

How a strong candidate structures it, and what interviewers check.

Your notesSaved automatically