Notion-Style Block Editor — HTML CSS JS Snippet

The block editor — pioneered by Notion and now expected in docs tools, CMSs, note apps, and AI writing products — replaces one big rich-text area with a vertical list of independent blocks: paragraphs, headings, to-dos, quotes, each its own editable unit, created and transformed through a slash-command menu. Full implementations (ProseMirror, Lexical, Tiptap, Editor.js) are heavyweight for good reasons, but the core interaction model fits in a few hundred lines of vanilla JavaScript — and building it teaches exactly why those libraries make the choices they do. This snippet implements the recognisable essentials: seven block types, the "/" menu with filtering and keyboard navigation, Enter/Backspace block management, list continuation, and Notion's floating placeholder text.

One block, one contenteditable

The critical architectural decision: instead of a single contenteditable document (the traditional rich-text approach, and the source of most of its legendary pain), *each block owns its own small contenteditable element*. A block is a flex row — hover-revealed drag dots, an optional checkbox for to-dos, and the .block-content editable div — with its type stored in data-type and all type styling driven by [data-type="…"] attribute selectors. Per-block editables mean the browser can never produce the arbitrary nested markup that plagues monolithic contenteditable (a stray bold span swallowing three paragraphs); the document structure lives in the DOM as a clean list of typed blocks, trivially serialisable by mapping over editor.children. This is, in miniature, the same model Editor.js uses.

The slash menu: trigger, filter, place, apply

Typing "/" as the first character of a block opens the command menu — detected in the input event by checking textContent.startsWith('/'), with everything after the slash used as a live filter over the block-type registry (type "/h" and only headings remain). The menu positions itself under the active block via getBoundingClientRect() math relative to the page wrapper, clamped so it never overflows. Navigation follows the roving-index pattern: ArrowUp/Down move a .focused highlight, Enter applies, Escape dismisses, and mousemove syncs the same index so mouse and keyboard never fight. One subtle but load-bearing detail: menu items listen on mousedown with preventDefault() rather than click — a click would first blur the editable and collapse the selection before the handler runs, the classic bug in every toolbar-over-contenteditable UI. Applying a type calls makeBlock() and replaceWith(), swapping the slash-bearing paragraph for a fresh block of the chosen type.

Keyboard block management

Enter never inserts a newline — it creates the next block (preventDefault, build, block.after(nb), focus). The type of that next block encodes the list-continuation rule: a non-empty to-do or bullet spawns another of the same type, anything else spawns a paragraph — press Enter on an *empty* to-do and you drop back to text, exactly Notion's escape-from-list behaviour. Backspace on an empty block removes it and focuses the previous block with the caret moved to its end, done properly with a collapsed Range (selectNodeContents + collapse(false)) since programmatic focus alone puts the caret at the start. Dividers are the special case: non-editable (contentEditable="false"), rendered as an <hr>, and choosing one auto-inserts a focused paragraph after it so the caret always has somewhere to live.

Placeholders without placeholder attributes

Divs have no placeholder attribute, so the hint text uses the CSS trick every block editor relies on: .block-content:empty::before { content: attr(data-ph) } — each block carries its own hint ("Heading 1", "To-do", "Type '/' for commands") in a data attribute, painted as a pseudo-element only while the element is truly empty, with pointer-events: none so it never intercepts the caret. Type-specific styling covers the rest: attribute selectors size headings, draw the quote's indigo left border, inject bullet dots via ::before on the block, and strike through completed to-dos via a .done class toggled by the checkbox.