RichTextEditor

A lightweight contentEditable editor with markdown shortcuts, a floating selection toolbar, a slash menu, and clean HTML and markdown output.

When to use

• Release notes, post bodies, descriptions and docs where people need headings, lists, links and code.
• When you want markdown in and out without a heavy editor framework.
• Not for short comments with mentions; use MentionInput.
• Not for plain multi-line text; use Textarea.

Usage

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

const [doc, setDoc] = useState(null);
h(RichTextEditor, {
  "aria-label": "Changelog entry",
  placeholder: "Write the changelog entry",
  defaultMarkdown: "# notdocs 1.5.0\n\n- Print or save any page as PDF\n- The workspace fits a phone",
  onChange: setDoc, // { html, markdown, text, empty }
});

Props

Prop	Type	Default	Description
value	string	–	Controlled HTML; only rewritten when it differs from what was last emitted.
defaultValue	string	–	Initial HTML, sanitized on load.
defaultMarkdown	string	–	Initial content as markdown when no HTML is given.
onChange	(value: { html; markdown; text; empty }) => void	–	After each edit. HTML is canonical and keeps only href attributes.
onHistoryChange	({ canUndo, canRedo }) => void	–	For your own undo and redo buttons.
placeholder	string	"Start writing"	Shown when empty.
blockHint	string	"Type / for blocks"	Hint on an empty line with the caret.
readOnly	boolean	false	Turns off editing, toolbar and shortcuts.
autoFocus	boolean	false	Focus on mount with the caret at the end.
aria-label	string	"Editor"	Accessible name of the textbox.
className / style	–	–	Root class and inline style.

A ref exposes focus, getHTML, getMarkdown, getText, setHTML, setMarkdown, clear, undo, redo and element.

Notes

• Keyboard: standard shortcuts for bold, italic, strikethrough, inline code, links and undo/redo (underline is blocked); / opens the block menu; Tab indents list items; Alt+F10 moves focus into the floating toolbar.
• The surface is a labelled multiline textbox; the toolbar's toggle buttons report pressed state and keep the selection on click; a polite live region announces formatting and undo.
• The editor has no frame of its own; place it inside a bordered surface or card.
• Reduced motion makes toolbar position and size changes jump and menus fade without scale.