Rich text editor

A React component in Beamline's Form controls category.

A Notion-grade writing surface: slash menu for every block, a formatting toolbar on selection, drag-to-move blocks, nesting, markdown shortcuts, paste from the web or as markdown; outputs HTML, Markdown and JSON.

Use it for

• Documents, briefs, notes and long descriptions people format themselves.
• Anywhere output is needed as Markdown or HTML (tickets, emails, knowledge bases).

Not for

• Plain text or a single line (textarea, input).
• Editing code (code-block shows code; use a code editor).
• Chat composing (prompt-bar).

Anatomy

• document (ProseMirror surface)
• block handle beside the hovered block: + (insert below) and grip (drag)
• formatting toolbar on selection: Turn into, bold, italic, strike, code, link, colour
• slash menu at the caret
• link field inside the toolbar
• colour palette (text and background)

Variants

• 0: editable
• 1: readOnly

States

• empty (placeholder)
• empty line under caret (hint)
• selection (toolbar)
• slash query (menu, filtered, empty result)
• dragging a block (drop cursor)
• read only
• focused (the look's focus outline around the writing surface)
• image upload refused with retained retry files

Keyboard

• / opens the block menu; ↑/↓ move, Enter or Tab insert, Esc closes
• # ## ### - * 1. [] > ``` --- at the start of a line turn it into that block
• **bold** _italic_ `code` ~~strike~~ as you type
• ⌘B ⌘I ⌘⇧S ⌘E ⌘K format the selection
• Tab / Shift+Tab nest and un-nest list and to-do items
• ⌘Z / ⌘⇧Z undo and redo
• -- becomes an em dash, quotes become typographic

Motion

Toolbar and menus appear at once (no entrance animation: they follow the caret); a to-do's check draws in over --pui-duration-standard and its box fills at 0ms.

Props

Dependencies

@tiptap/react, @tiptap/pm, @tiptap/starter-kit, @tiptap/extension-list, @tiptap/extensions, @tiptap/extension-text-style, @tiptap/extension-highlight, @tiptap/extension-typography, @tiptap/extension-image, @tiptap/extension-code-block-lowlight, @tiptap/markdown, @tiptap/extension-drag-handle-react, @tiptap/suggestion, lowlight, lucide-react

Import

import { RichTextEditor } from "@/components/rich-text-editor/rich-text-editor";

Get it

Rich text editor is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent

More in Form controls

• Allocation editor: Parts of a fixed whole edited as transfers: an ordered strip whose boundaries drag or step between neighbours and a roster of exact amounts where typing…
• Billing toggle: Monthly or yearly: a segmented control whose yearly note turns into what the choice saves.
• Calendar: Month grids for picking a day or a range: a real grid with arrows by day and week, Page keys by month, closed days, today's dot, and a range span that…
• Checkbox: A yes/no choice with an optional label and help, including the mixed state for select-all; the check draws itself in.
• Chip group: Quick filters as chips: a chosen chip fills and grows a check, counts show what each would return, and extra chips fold behind “+N more”.
• Color Palette: A wheel of preset colours to pick from: twelve hues around the ring, their tints inward, white at the middle; the chosen swatch lifts and carries a check.
• Colour picker: A swatch that opens a picker: saturation-brightness plane, hue strip, HEX/RGB/HSL/OKLCH value to type or copy, the screen eyedropper where available…
• Combobox: One value from a long list found by typing (time zones, countries, customers): ranked matches with the match emphasised, keywords, optional group…
• Date picker: One date in a form: a field that opens the month grid under it with focus inside, picks and closes; Today and Clear below, optional clear button.
• Date range picker: A reporting range: presets on one side and two months on the other (one on a phone); the trigger names the preset in use, and the footer counts the days.
• File drop zone: A generous target for files: drop or choose, each checked against type, size and count with the reason when turned away; uploads show progress and can be…
• Form: Validation wiring for react-hook-form (and zod) on the system's own fields: each field already links its label, help and error, so FormField hands over…
• Inline edit: Text that becomes a field in the same place: Enter (or ⌘Enter when multiline) saves, Escape cancels, leaving saves; saving shows progress and a refusal…
• Input: A single-line text field with its label, help and error wired for assistive tech, three sizes and adornments.
• Input Dissolve: A one-line field whose text breaks into specks and drifts off once it is sent, last letter first; the field is empty and ready again.
• Label: The text label tied to a form control, with a required marker that screen readers announce.
• Mention input: A composer where @people and #channels become single tokens with suggestions at the caret; the value keeps the text and where each mention sits.
• Multi-select: Several values from a known list as removable chips in the field; the list has a search field (for long lists), checkable rows and a count with Clear.
• Number field: A bounded number with − and +: arrows and Page keys step, typing is read in the locale and clamped on leaving, limits can be explained, and the label can…
• OTP input: A verification code in separate boxes backed by one real field, so paste, SMS autofill and Backspace work; optional groups like 123–456.
• Password field: A password field with a reveal control, and a strength meter when a password is being created.
• Phone input: A phone number with its country: searchable picker with country and dialling codes, “+44…” switches the country, the number groups as typed, and the…
• Radio cards: One choice among rich options as cards with optional media, icon, detail and a figure; one selection ring follows the stable choice.
• Radio group: One choice from a short visible set, each option with an optional description, vertical or in a row.
• Search field: The search entry point: magnifier, clear button, Escape to clear, a shortcut hint and an optional live border beam.
• Segmented control: Two to five views or ranges of the same content (1D / 1W / 1M, List / Board): a radio group whose raised thumb slides to the choice.
• Select: One choice from a short known list, in the same frame as every text field: label, help, error, option groups and details.
• Shortcut recorder: Lets people set their own shortcut: press the keys, see them as keycaps; a clash or a browser-kept shortcut asks first. ShortcutCheatsheet lists every…
• Signature pad: A pad for a drawn signature whose ink thins with speed; undo, replay, PNG or SVG export, and typing instead for keyboards and screen readers.
• Slider: A value or range on a known scale: the thumb grows under the finger and shows its value while dragged or focused; marks, end icons and a value readout.
• Switch: A setting that applies at once: a thumb that slides on a spring and stretches under the finger, with an optional label before or after.
• Tag input: Short free-form values as tags: Enter, comma or Tab adds, a pasted list adds them all, Backspace twice removes the last; duplicates and invalid values…
• Textarea: Multi-line plain text that grows with what is typed up to a limit, with an optional character count.
• Time picker: A time of day as hour and minute segments, typed or stepped, 12- or 24-hour; the clock opens a list of times at the step.
• Toggle group: Pressable toggles where one or several can be on: alignment, bold and italic, view options; bare for toolbars or framed.