Markdown Editor Form Block for React

It reads the textarea's value and selection from the page, runs a pure function (boldEdit, italicEdit, listEdit, linkEdit) that returns the new text and what to select, sets the state and puts the selection back in the field. Bold on a selection adds ** around it, or removes them when they are already there; with nothing selected it inserts a placeholder word and selects it so typing replaces it. Link wraps the selection as [text](https://) and selects the address. Because the text is Markdown, undo works with the browser's own history for typing, but not for toolbar edits: a real editor would keep its own stack.

A small parser in the file splits the text into paragraphs and bullet lists, then each line into plain, bold, italic and link pieces, and renders them as elements, so no HTML from the text is ever inserted. Links only keep addresses that start with http, https, mailto or #; anything else becomes #, and in this demo a link does not navigate. It is a subset on purpose: headings, images, tables and code are left out. For the full language use a Markdown library and sanitise its output.

The toolbar is one tab stop (a roving tabIndex): Tab enters at the last button used, the arrow keys move along it (reversed on a right-to-left page), Home and End jump to the ends, and Enter or Space press a button. The toggle buttons expose aria-pressed, which follows the caret as it moves, and while Preview is showing they stay focusable but quiet and say so instead of acting. Ctrl or Cmd + B and + I work inside the textarea.

Contenteditable behaves differently in every browser and is hard to make accessible; a textarea has one selection model, native undo for typing, spell checking and a mobile keyboard that works. Showing the Markdown beside a rendered preview is honest about what is stored. If you need real rich text, pick an editor built for it and keep this block's toolbar pattern and its keyboard support.

The page text lives in the block's state and Publish page only says it was published in this demo: nothing is saved, sent or kept. In your app post the Markdown from the submit handler, render it on the server with the same subset (or a sanitising library), and show the server's answer in the status line.

Keep the Markdown string as the field's value. With react-hook-form, use Controller around the textarea and call field.onChange from the same handlers, including the toolbar's apply. With TanStack Form, validate the length on change and leave the formatting functions pure, so they can be tested without the form.