Building rich text editors from scratch forces you to reinvent command dispatch (bold, italic, lists), manage contentEditable's quirky caret behavior, handle HTML↔markdown round-tripping, and implement XSS-safe sanitization. Without a foundation, each editor becomes a sprawling one-off, dueling with browser inconsistencies and accumulating copy-paste bugs across the suite.

Editor is a controlled, compound rich-text component with a toolbar that wraps the browser's contentEditable API. It exports Editor.Toolbar (with an optional actions array of EditorAction objects, each holding icon, label, and command), Editor.Toolbar.Separator, Editor.SourceToggle, and Editor.Content. The root accepts value and onChange for controlled state, plus outputFormat ("html" or "markdown"), lineSpacing, placeholder, and extensions for custom render rules. A built-in Source toggle (</>) swaps the rich-text surface for a textarea of the raw markup — HTML or Markdown per outputFormat — controllable via showSource / defaultShowSource / onShowSourceChange (and opt-out with Editor.Toolbar's showSourceToggle). Stable data-react-fancy-editor-* attributes and a useEditor() hook expose exec(), insertText(), wrapSelection(), and showSource / setShowSource for programmatic mutations and agent operability.

Import Editor and useEditor from @particle-academy/react-fancy, wrap your toolbar and content in <Editor value={md} onChange={setMd} outputFormat="markdown">, then add <Editor.Toolbar /> and <Editor.Content maxHeight={400} />. The default toolbar already includes the Source toggle; drop <Editor.SourceToggle /> into a custom toolbar to place it yourself, or drive source view with showSource / onShowSourceChange. Use useEditor() in custom toolbar buttons to call exec("bold") or insertText("text"); agents bridge via MCP tools that target the data-react-fancy-editor-content div and call the same methods to mutate without DOM scraping.